import Link from 'next/link';
import type { ReactNode } from 'react';
import type { LucideIcon } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';

export interface BrowsePageHeroAction {
  href: string;
  label: string;
  icon: LucideIcon;
  variant?: 'heroOutline' | 'accent' | 'default';
}

interface BrowsePageHeroProps {
  eyebrow: string;
  title: string;
  description: string;
  leading?: ReactNode;
  actions?: BrowsePageHeroAction[];
  /** directory = navy/amber workers look */
  variant?: 'default' | 'directory';
}

export function BrowsePageHero({
  eyebrow,
  title,
  description,
  leading,
  actions,
  variant = 'default',
}: BrowsePageHeroProps) {
  const isDirectory = variant === 'directory';

  return (
    <section
      className={cn(
        isDirectory
          ? 'browse-hero-directory'
          : 'bg-slate-900 text-white border-b border-slate-800'
      )}
    >
      <div className="page-container max-w-6xl py-8 md:py-10">
        <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-4">
          <div className="flex gap-4 min-w-0">
            {leading && (
              <div
                className={cn(
                  'flex h-14 w-14 shrink-0 items-center justify-center text-3xl',
                  isDirectory ? 'bg-[var(--home-amber)] text-white' : 'rounded-xl bg-white/10'
                )}
              >
                {leading}
              </div>
            )}
            <div className="min-w-0">
              <p
                className={cn(
                  'text-xs font-semibold uppercase tracking-widest mb-2',
                  isDirectory ? 'text-amber-400/90' : 'text-slate-400'
                )}
              >
                {eyebrow}
              </p>
              <h1
                className={cn(
                  'text-2xl md:text-3xl font-bold tracking-tight',
                  isDirectory && 'home-display'
                )}
              >
                {title}
              </h1>
              <p
                className={cn(
                  'text-sm mt-2 max-w-lg',
                  isDirectory ? 'text-slate-300' : 'text-slate-400'
                )}
              >
                {description}
              </p>
            </div>
          </div>
          {actions && actions.length > 0 && (
            <div className="flex flex-wrap gap-2">
              {actions.map((action) => (
                <Link key={action.href + action.label} href={action.href}>
                  <Button
                    variant={
                      isDirectory && action.variant === 'accent'
                        ? undefined
                        : (action.variant ?? 'heroOutline')
                    }
                    size="sm"
                    className={cn(
                      'gap-1.5',
                      isDirectory && action.variant === 'accent' && 'worker-cta-amber rounded-none',
                      isDirectory &&
                        (action.variant ?? 'heroOutline') === 'heroOutline' &&
                        'rounded-none border-white/25'
                    )}
                  >
                    <action.icon className="h-4 w-4" />
                    {action.label}
                  </Button>
                </Link>
              ))}
            </div>
          )}
        </div>
      </div>
    </section>
  );
}