import { X } from "lucide-react";

interface Props {
  eyebrow: string;
  title: string;
  onClose: () => void;
}

/**
 * Shared side-panel header used by every SP21 drill-down drawer
 * (provider, …future ones). Renders an uppercase eyebrow above a
 * larger title, with a close button on the right.
 *
 * Visual style mirrors the eyebrow + title pattern used elsewhere in
 * the app (see ``.eyebrow`` in ``src/index.css`` and the
 * ``DrillDrawerHeader`` usage in ``ClaimDrawerHeader``).
 */
export function DrillDrawerHeader({ eyebrow, title, onClose }: Props) {
  return (
    <div className="flex items-center justify-between border-b border-border/30 px-6 py-4">
      <div>
        <div className="text-[10.5px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
          {eyebrow}
        </div>
        <h2 className="text-[18px] font-semibold tracking-tight mt-0.5">{title}</h2>
      </div>
      <button
        type="button"
        onClick={onClose}
        aria-label="Close drawer"
        className="rounded-md p-1 text-muted-foreground hover:bg-muted/60 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
      >
        <X className="h-4 w-4" aria-hidden />
      </button>
    </div>
  );
}
