import { motion } from "motion/react";
import { Search } from "lucide-react";
import { Badge } from "../ui/badge";
import { Input } from "../ui/input";

interface SectionHeaderProps {
    variant?:string;
    badge?: string;
    title?: string;
    description?: string;
    special?: string;
    showSearch?: boolean;
    searchPlaceholder?: string;
    className?: string;
    searchValue?: string;
    onSearchChange?: (value: string) => void;
}

export function SectionHeader({
    variant = "section",
    badge,
    title,
    description,
    showSearch = false,
    searchPlaceholder = "Search articles...",
    className,
    searchValue,
    onSearchChange
}: SectionHeaderProps) {

    if (variant === "hero") {
        return (
            <section className={`py-16 pt-35 px-4 mb-10 banner-gradient text-white ${className} relative z-10`}>
                <div className="container mx-auto max-w-4xl text-center">
                    <motion.div
                        initial={{ opacity: 0, y: 20 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ duration: 0.6 }}
                    >
                        {badge && (
                            <Badge variant="secondary" className="mb-4 bg-blue-soft badge-hero-primary text-sm">
                                {badge}
                            </Badge>
                        )}

                        <h1 className="text-4xl md:text-6xl font-bold mb-6 text-white highlightbg"   dangerouslySetInnerHTML={{ __html: title || "" }}>

                        </h1>

                        {description && (
                            <p className="text-xl opacity-90">
                                {description}
                            </p>
                        )}

                        {showSearch && (
                            <div className="max-w-xl mx-auto px-4 ">
                                <div className="relative mt-8">
                                    <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5  text-gray-400" />
                                    <Input
                                        placeholder={searchPlaceholder}
                                        value={searchValue}
                                        onChange={(e) => onSearchChange?.(e.target.value)}
                                        className="pl-12 h-12 bg-white text-black"
                                    />
                                </div>
                            </div>
                        )}
                    </motion.div>
                </div>
            </section>
        );
    }

    return (
        <div className={`container mx-auto text-center mb-16 z-10 relative ${className}`}>
            <motion.div
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
            >
                {badge && <Badge className="mb-5">{badge}</Badge>}

                <h2 className="text-4xl text-black md:text-[38px] highlight font-bold mb-4 " dangerouslySetInnerHTML={{ __html: title || "" }}>
                 
                </h2>

                {description && (
                    <p className="text-xl text-primary2">{description}</p>
                )}
            </motion.div>
        </div>
    );
}