'use client'
import Link from 'next/link'

type HeroMetric = {
    label: string
    value: string | number
    accent?: 'primary' | 'accent' | 'success' | 'warning'
}

type HeroAction = {
    label: string
    href?: string
    onClick?: () => void
    variant?: 'solid' | 'ghost'
}

type WelcomeHeroProps = {
    kicker?: string
    name?: string
    subtitle?: string
    metrics?: HeroMetric[]
    actions?: HeroAction[]
    emoji?: string
}

const WelcomeHero = ({
    kicker,
    name,
    subtitle,
    metrics = [],
    actions = [],
    emoji,
}: WelcomeHeroProps) => {
    return (
        <section className="relative overflow-hidden rounded-card bg-gradient-to-br from-primary via-[#a668ff] to-accent text-white 2xl:p-10 p-6 shadow-[0_20px_60px_-20px_rgba(140,82,255,0.45)]">
            <span aria-hidden className="pointer-events-none absolute -top-24 -right-16 h-72 w-72 rounded-full bg-accent/50 blur-3xl" />
            <span aria-hidden className="pointer-events-none absolute -bottom-28 -left-16 h-80 w-80 rounded-full bg-primary/60 blur-3xl" />
            <span aria-hidden className="pointer-events-none absolute inset-0 bg-[radial-gradient(at_70%_10%,rgba(255,255,255,0.25)_0px,transparent_40%)]" />

            <div className="relative grid gap-8 2xl:grid-cols-[1.1fr,1fr] items-center">
                <div className="flex flex-col gap-4">
                    {kicker && (
                        <span className="inline-flex w-fit items-center gap-2 rounded-full bg-white/15 backdrop-blur-sm border border-white/20 px-3 py-1 text-xs uppercase tracking-[0.2em] font-semibold text-white">
                            {emoji && <span className="text-sm leading-none">{emoji}</span>}
                            {kicker}
                        </span>
                    )}
                    <h2 className="text-display font-bold 2xl:text-5xl text-3xl leading-[1.05] text-white">
                        {name}
                    </h2>
                    {subtitle && (
                        <p className="text-white/85 2xl:text-lg md:text-base text-sm max-w-lg leading-relaxed">
                            {subtitle}
                        </p>
                    )}
                    {actions.length > 0 && (
                        <div className="flex flex-wrap gap-3 mt-2">
                            {actions.map((action, idx) => {
                                const base = 'inline-flex items-center justify-center rounded-xl h-11 px-6 text-sm font-semibold transition-all duration-200 hover:-translate-y-0.5'
                                const style = action.variant === 'ghost'
                                    ? 'bg-white/10 backdrop-blur-sm border border-white/30 text-white hover:bg-white/20'
                                    : 'bg-white text-primary shadow-[0_10px_30px_-10px_rgba(0,0,0,0.35)] hover:shadow-[0_16px_40px_-12px_rgba(0,0,0,0.4)]'
                                if (action.href) {
                                    return (
                                        <Link key={idx} href={action.href} className={`${base} ${style}`}>
                                            {action.label}
                                        </Link>
                                    )
                                }
                                return (
                                    <button key={idx} type="button" onClick={action.onClick} className={`${base} ${style}`}>
                                        {action.label}
                                    </button>
                                )
                            })}
                        </div>
                    )}
                </div>

                {metrics.length > 0 && (
                    <div className="grid grid-cols-3 gap-3 md:gap-4">
                        {metrics.slice(0, 3).map((metric, idx) => (
                            <div
                                key={idx}
                                className="relative rounded-2xl bg-white/12 backdrop-blur-md border border-white/20 px-4 py-5 flex flex-col gap-1 shadow-[inset_0_1px_0_rgba(255,255,255,0.15)]"
                            >
                                <span className="text-display font-bold md:text-3xl text-2xl leading-none">{metric.value}</span>
                                <span className="text-[11px] uppercase tracking-[0.15em] font-semibold text-white/75 leading-tight">{metric.label}</span>
                            </div>
                        ))}
                    </div>
                )}
            </div>
        </section>
    )
}

export default WelcomeHero