import React, { useState } from 'react';
import { ChevronDown, Lightbulb, BookOpen, Info } from 'lucide-react';

interface Props {
  title: string;
  children: React.ReactNode;
  defaultOpen?: boolean;
  variant?: 'default' | 'info' | 'deep-dive';
}

const Collapsible: React.FC<Props> = ({ 
  title, 
  children, 
  defaultOpen = false,
  variant = 'default'
}) => {
  const [isOpen, setIsOpen] = useState(defaultOpen);

  const getVariantStyles = () => {
    switch (variant) {
      case 'info':
        return {
          wrapper: 'border-blue-200 dark:border-blue-800 bg-blue-50/50 dark:bg-blue-900/10',
          header: 'hover:bg-blue-100/50 dark:hover:bg-blue-900/20',
          icon: <Info size={16} className="text-blue-500" />,
          title: 'text-blue-700 dark:text-blue-300'
        };
      case 'deep-dive':
        return {
          wrapper: 'border-purple-200 dark:border-purple-800 bg-purple-50/50 dark:bg-purple-900/10',
          header: 'hover:bg-purple-100/50 dark:hover:bg-purple-900/20',
          icon: <Lightbulb size={16} className="text-purple-500" />,
          title: 'text-purple-700 dark:text-purple-300'
        };
      default:
        return {
          wrapper: 'border-gray-200 dark:border-gray-700 bg-gray-50/50 dark:bg-gray-800/30',
          header: 'hover:bg-gray-100/50 dark:hover:bg-gray-800/50',
          icon: <BookOpen size={16} className="text-gray-500" />,
          title: 'text-gray-700 dark:text-gray-300'
        };
    }
  };

  const styles = getVariantStyles();

  return (
    <div className={`rounded-xl border overflow-hidden transition-all duration-300 ${styles.wrapper}`}>
      <button
        onClick={() => setIsOpen(!isOpen)}
        className={`
          w-full flex items-center justify-between p-4 text-left
          transition-colors duration-200 ${styles.header}
        `}
      >
        <div className="flex items-center gap-3">
          {styles.icon}
          <span className={`font-semibold text-sm ${styles.title}`}>
            {title}
          </span>
        </div>
        <ChevronDown 
          size={18}
          className={`
            transition-transform duration-300 ease-out text-gray-400
            ${isOpen ? 'rotate-180' : ''}
          `}
        />
      </button>
      
      <div 
        className={`
          overflow-hidden transition-all duration-300 ease-out
          ${isOpen ? 'max-h-[2000px] opacity-100' : 'max-h-0 opacity-0'}
        `}
      >
        <div className="p-4 pt-0 border-t border-gray-100 dark:border-gray-800">
          <div className="pt-4 prose prose-sm dark:prose-invert max-w-none">
            {children}
          </div>
        </div>
      </div>
    </div>
  );
};

export default Collapsible;

