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

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 (
    <FrostedSurface
      className={cn(
        'relative overflow-hidden rounded-3xl border border-white/15 p-8 text-slate-900 shadow-2xl shadow-rose-300/20 backdrop-blur-2xl transition-colors duration-200 dark:text-slate-100 md:p-12',
        className
      )}
    >
      <div
        aria-hidden
        className="pointer-events-none absolute inset-x-0 top-[-30%] h-[220px] bg-[radial-gradient(circle,_rgba(255,137,170,0.35),_transparent_60%)]"
      />
      <div className="relative space-y-4 text-center md:space-y-6">
        {eyebrow && (
          <p className="text-xs uppercase tracking-[0.35em] text-rose-300 dark:text-rose-200 md:text-sm">
            {eyebrow}
          </p>
        )}
        <h2 className="font-display text-3xl font-semibold tracking-tight text-slate-900 dark:text-slate-100 md:text-4xl">
          {title}
        </h2>
        {scriptTitle && (
          <p className="font-script text-2xl text-rose-300 md:text-3xl">
            {scriptTitle}
          </p>
        )}
        {description && (
          <p className="mx-auto max-w-2xl text-base text-slate-600 dark:text-slate-300 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 transition-colors',
                  variant === 'outline'
                    ? 'border-white/60 bg-white/20 text-slate-900 hover:bg-white/40 dark:border-slate-700 dark:bg-slate-900/40 dark:text-slate-100'
                    : 'bg-gradient-to-r from-[#ff5f87] via-[#ec4899] to-[#6366f1] text-white shadow-lg shadow-rose-300/30 hover:from-[#ff4470] hover:via-[#ec4899] hover:to-[#4f46e5]'
                )}
                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>
    </FrostedSurface>
  );
}

WelcomeHero.displayName = 'WelcomeHero';