import React from 'react';
import { Button } from '@/components/ui/button';
import { LucideIcon } from 'lucide-react';
import { cn } from '@/lib/utils';

interface ActionProps {
  label: string;
  onClick?: () => void;
  href?: string;
  icon?: LucideIcon;
  variant?: 'default' | 'outline';
}

export interface WelcomeHeroProps {
  eyebrow?: string;
  title: string;
  scriptTitle?: string;
  description?: string;
  actions?: ActionProps[];
  className?: string;
}

export function WelcomeHero({
  eyebrow,
  title,
  scriptTitle,
  description,
  actions = [],
  className,
}: WelcomeHeroProps) {
  return (
    <section
      className={cn(
        'rounded-3xl border border-brand-rose-soft bg-brand-card p-8 shadow-brand-primary backdrop-blur-xl',
        className
      )}
    >
      <div className="space-y-4 text-center md:space-y-6">
        {eyebrow && (
          <p className="text-xs uppercase tracking-[0.35em] text-brand-rose md:text-sm">
            {eyebrow}
          </p>
        )}
        <h2 className="font-display text-3xl font-semibold tracking-tight text-brand-slate md:text-4xl">
          {title}
        </h2>
        {scriptTitle && (
          <p className="font-script text-2xl text-brand-rose md:text-3xl">
            {scriptTitle}
          </p>
        )}
        {description && (
          <p className="mx-auto max-w-2xl text-base font-sans-marketing text-brand-navy/80 md:text-lg">
            {description}
          </p>
        )}
        {actions.length > 0 && (
          <div className="flex flex-col items-center gap-3 pt-4 md:flex-row md:justify-center">
            {actions.map(({ label, onClick, href, icon: Icon, variant = 'default' }) => (
              <Button
                key={label}
                size="lg"
                variant={variant === 'outline' ? 'outline' : 'default'}
                className={cn(
                  'min-w-[220px] rounded-full px-6',
                  variant === 'outline'
                    ? 'border-brand-rose-soft text-brand-rose hover:bg-brand-rose-soft/40'
                    : 'bg-brand-rose text-white shadow-md shadow-rose-400/40 hover:bg-[var(--brand-rose-strong)]'
                )}
                onClick={onClick}
                {...(href ? { asChild: true } : {})}
              >
                {href ? (
                  <a href={href} className="flex items-center justify-center gap-2">
                    {Icon && <Icon className="h-4 w-4" />}
                    <span>{label}</span>
                  </a>
                ) : (
                  <span className="flex items-center justify-center gap-2">
                    {Icon && <Icon className="h-4 w-4" />}
                    <span>{label}</span>
                  </span>
                )}
              </Button>
            ))}
          </div>
        )}
      </div>
    </section>
  );
}

WelcomeHero.displayName = 'WelcomeHero';
