import React from "react";
import { ChevronDown, ChevronRight } from "lucide-react";

interface CollapsibleSectionProps {
  title: string;
  isExpanded: boolean;
  onToggle: () => void;
  children: React.ReactNode;
}

const CollapsibleSection: React.FC<CollapsibleSectionProps> = ({
  title,
  isExpanded,
  onToggle,
  children,
}) => (
  <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm overflow-hidden">
    <button
      onClick={onToggle}
      className="w-full px-6 py-4 flex items-center justify-between text-left hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors rounded-t-lg focus:outline-none">
      <h2 className="text-lg font-semibold text-gray-900 dark:text-white">{title}</h2>
      {isExpanded ? (
        <ChevronDown className="h-5 w-5 text-gray-500 dark:text-gray-400" />
      ) : (
        <ChevronRight className="h-5 w-5 text-gray-500 dark:text-gray-400" />
      )}
    </button>
    {isExpanded && (
      <div className="p-6 border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">{children}</div>
    )}
  </div>
);

export default CollapsibleSection;
