"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>
  );
}