import { cn } from "@/lib/utils";
import { motion, AnimatePresence } from 'framer-motion';
import { ChevronDown, ChevronUp } from "lucide-react";
import { useState } from "react";

export const Section = ({ title, icon: Icon, children, defaultOpen = true, hasError = false }: {
    title: string;
    icon: any;
    children: React.ReactNode;
    defaultOpen?: boolean;
    hasError?: boolean;
}) => {
    const [isOpen, setIsOpen] = useState(defaultOpen);
    return (
        <div className={cn("border-b border-gray-100 dark:border-gray-800 last:border-0", hasError && "bg-red-50/30 dark:bg-red-900/10")}>
            <button
                type="button"
                onClick={() => setIsOpen(!isOpen)}
                className="w-full flex items-center justify-between p-4 hover:bg-gray-50 dark:hover:bg-gray-900/50 transition-colors text-left"
            >
                <div className="flex items-center gap-3">
                    <Icon className={cn("w-4 h-4", hasError ? "text-green-500" : "text-[#007E45]")} />
                    <span className={cn("font-semibold text-sm", hasError ? "text-green-600" : "text-gray-900 dark:text-white")}>
                        {title}
                    </span>
                </div>
                {isOpen ? <ChevronUp className="w-4 h-4 text-gray-400" /> : <ChevronDown className="w-4 h-4 text-gray-400" />}
            </button>
            <AnimatePresence>
                {isOpen && (
                    <motion.div
                        initial={{ height: 0, opacity: 0 }}
                        animate={{ height: 'auto', opacity: 1 }}
                        exit={{ height: 0, opacity: 0 }}
                        className="overflow-hidden"
                    >
                        <div className="p-4 pt-0 space-y-4">{children}</div>
                    </motion.div>
                )}
            </AnimatePresence>
        </div>
    );
};

