"use client";

import { ReactNode } from "react";
import { ChevronDown, ChevronUp } from "lucide-react";
import { motion, AnimatePresence } from "framer-motion";

interface DrawerProps {
    title: string;
    icon?: ReactNode;
    isOpen: boolean;
    onToggle: () => void;
    children: ReactNode;
    hasData?: boolean;
}

export default function Drawer({ title, icon, isOpen, onToggle, children, hasData = false }: DrawerProps) {
    return (
        <div className="mb-4 border border-primary-500/20 rounded-xl overflow-hidden bg-theme-input">
            <button
                onClick={onToggle}
                className="w-full flex items-center justify-between p-4 hover:bg-primary-500/10 transition-colors"
            >
                <div className="flex items-center gap-3">
                    {icon && <div className="text-primary-500">{icon}</div>}
                    <h3 className="text-lg font-semibold text-theme-primary">{title}</h3>
                    {hasData && (
                        <span className="px-2 py-1 text-xs bg-green-500/20 text-green-500 rounded-full">
                            Added
                        </span>
                    )}
                </div>
                {isOpen ? (
                    <ChevronUp className="w-5 h-5 text-theme-secondary" />
                ) : (
                    <ChevronDown className="w-5 h-5 text-theme-secondary" />
                )}
            </button>

            <AnimatePresence>
                {isOpen && (
                    <motion.div
                        initial={{ height: 0, opacity: 0 }}
                        animate={{ height: "auto", opacity: 1 }}
                        exit={{ height: 0, opacity: 0 }}
                        transition={{ duration: 0.3 }}
                        className="overflow-hidden"
                    >
                        <div className="p-4 border-t border-primary-500/20">
                            {children}
                        </div>
                    </motion.div>
                )}
            </AnimatePresence>
        </div>
    );
}