import { type ReactNode } from 'react';
import { Button } from '@/components/ui/button';
import { Link } from '@inertiajs/react';
import { login, register } from '@/routes';
import { cn } from '@/lib/utils';

interface HeroSectionProps {
    title: string;
    subtitle: string;
    description: string;
    isAuthenticated: boolean;
    className?: string;
    children?: ReactNode;
}

export default function HeroSection({
    title,
    subtitle,
    description,
    isAuthenticated,
    className,
    children
}: HeroSectionProps) {
    return (
        <section className={cn("relative overflow-hidden bg-gradient-to-br from-blue-50 via-white to-purple-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900", className)}>
            <div className="relative z-10 px-4 py-16 mx-auto max-w-[1400px] sm:px-6 lg:px-8">
                <div className="text-center">
                    <div className="inline-flex items-center px-4 py-2 mb-8 text-sm font-medium text-blue-800 bg-blue-100 rounded-full dark:text-blue-200 dark:bg-blue-900/30">
                        <svg className="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                            <path fillRule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                        </svg>
                        {subtitle}
                    </div>
                    
                    <h1 className="text-4xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-6xl lg:text-7xl">
                        {title}
                    </h1>
                    
                    <p className="max-w-3xl mx-auto mt-6 text-lg text-gray-600 dark:text-gray-300 sm:text-xl">
                        {description}
                    </p>
                    
                    {!isAuthenticated && (
                        <div className="flex flex-col items-center justify-center gap-4 mt-10 sm:flex-row">
                            <Button asChild size="lg" className="px-8 py-3 text-base font-semibold">
                                <Link href={register()}>
                                    Get Started
                                </Link>
                            </Button>
                            <Button asChild variant="outline" size="lg" className="px-8 py-3 text-base font-semibold">
                                <Link href={login()}>
                                    Sign In
                                </Link>
                            </Button>
                        </div>
                    )}
                    
                    {children}
                </div>
            </div>
        </section>
    );
}