Artifacts

import Link from "next/link";
import { ChevronLeft } from "lucide-react";

interface Crumb {
  label: string;
  href: string;
}

interface PageHeaderProps {
  title: string;
  description?: string;
  eyebrow?: string;
  back?: Crumb;
  actions?: React.ReactNode;
}

export function PageHeader({
  title,
  description,
  eyebrow,
  back,
  actions,
}: PageHeaderProps) {
  return (
    <div className="mb-8">
      {back && (
        <Link
          href={back.href}
          className="mb-3 inline-flex items-center gap-1 text-[13px] font-medium text-muted-foreground transition-colors hover:text-foreground"
        >
          <ChevronLeft className="h-4 w-4" />
          {back.label}
        </Link>
      )}
      {eyebrow && (
        <div className="mb-1.5 text-[11px] font-semibold uppercase tracking-[0.12em] text-accent">
          {eyebrow}
        </div>
      )}
      <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
        <div className="max-w-2xl">
          <h1 className="text-2xl font-semibold tracking-tight text-foreground">
            {title}
          </h1>
          {description && (
            <p className="mt-1.5 text-[15px] leading-relaxed text-muted-foreground">
              {description}
            </p>
          )}
        </div>
        {actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}
      </div>
    </div>
  );
}