import type { ReactNode } from 'react';
import Link from 'next/link';
import { ChevronLeft } from 'lucide-react';
import { cn } from '@/lib/utils';

export function PageHeader({
  eyebrow,
  title,
  description,
  backHref,
  actions,
  className,
}: {
  eyebrow?: string;
  title: string;
  description?: string;
  backHref?: string;
  actions?: ReactNode;
  className?: string;
}) {
  return (
    <header
      className={cn(
        'border-b border-gray-200/90 pb-4 dark:border-gray-800',
        className,
      )}
    >
      <div className="flex gap-3 sm:gap-4">
        {backHref ? (
          <div className="flex shrink-0 pt-0.5">
            <Link
              href={backHref}
              aria-label="Geri dön"
              className={cn(
                'inline-flex h-8 w-8 items-center justify-center rounded-lg border border-gray-200/80 bg-white text-gray-500 shadow-theme-xs',
                'transition-colors hover:border-gray-300 hover:bg-gray-50 hover:text-gray-900',
                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/25 focus-visible:ring-offset-2 focus-visible:ring-offset-white',
                'dark:border-gray-700 dark:bg-gray-900/50 dark:text-gray-400 dark:hover:border-gray-600 dark:hover:bg-gray-800 dark:hover:text-gray-100',
                'dark:focus-visible:ring-offset-gray-950',
              )}
            >
              <ChevronLeft className="size-4" strokeWidth={2} aria-hidden />
            </Link>
          </div>
        ) : null}

        <div className="min-w-0 flex-1 space-y-1.5">
          <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
            <div className="min-w-0 space-y-0.5">
              
              <h1 className="text-lg font-semibold tracking-tight text-gray-900 sm:text-xl dark:text-white/95">
                {title}
              </h1>
            </div>
            {actions ? (
              <div className="flex shrink-0 flex-wrap items-center gap-2 sm:justify-end">{actions}</div>
            ) : null}
          </div>
          {description ? (
            <p className="max-w-2xl text-sm leading-snug text-gray-500 dark:text-gray-400">{description}</p>
          ) : null}
        </div>
      </div>
    </header>
  );
}