<script lang="ts">
  import type { ComponentType } from 'svelte';

  let {
    category,
    title,
    icon
  }: {
    category: string;
    title: string;
    icon: ComponentType;
  } = $props();

  const Icon = $derived(icon);
</script>

<section class="page-header" aria-label={`${title} page header`}>
  <div class="page-header-icon" aria-hidden="true">
    <Icon size={20} strokeWidth={1.9} />
  </div>
  <div class="page-header-copy">
    <p>{category}</p>
    <h1>{title}</h1>
  </div>
</section>

<style>
  .page-header {
    display: flex;
    align-items: center;
    gap: 0.95rem;
    margin-bottom: 1.15rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: 1.15rem;
    background: var(--panel);
    box-shadow: var(--shadow);
  }

  .page-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.9rem;
    border: 1px solid color-mix(in srgb, var(--color-brand) 16%, var(--color-border));
    background: color-mix(in srgb, var(--color-brand-tint) 72%, var(--color-bg-surface));
    color: var(--color-brand);
  }

  .page-header-copy {
    min-width: 0;
  }

  .page-header-copy p {
    margin: 0 0 0.2rem;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .page-header-copy h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
  }

  @media (max-width: 720px) {
    .page-header {
      padding: 0.92rem 0.95rem;
    }

    .page-header-icon {
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 0.82rem;
    }

    .page-header-copy h1 {
      font-size: 1.28rem;
    }
  }
</style>
