tududi/frontend/components/Shared/CollapsibleSection.tsx

import React from 'react';
import { ChevronDownIcon, ChevronRightIcon } from '@heroicons/react/24/outline';

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

const CollapsibleSection: React.FC<CollapsibleSectionProps> = ({
    title,
    isExpanded,
    onToggle,
    children,
    className = '',
}) => {
    return (
        <div
            className={`border-b border-gray-200 dark:border-gray-700 ${className}`}
        >
            <button
                type="button"
                onClick={onToggle}
                className="w-full px-4 py-3 flex items-center justify-between text-left hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
            >
                <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
                    {title}
                </span>
                {isExpanded ? (
                    <ChevronDownIcon className="h-4 w-4 text-gray-500" />
                ) : (
                    <ChevronRightIcon className="h-4 w-4 text-gray-500" />
                )}
            </button>

            <div
                className={`transition-all duration-300 ease-in-out ${
                    isExpanded
                        ? 'max-h-[500px] opacity-100'
                        : 'max-h-0 opacity-0 overflow-hidden'
                }`}
            >
                <div className="px-4 pb-4">{children}</div>
            </div>
        </div>
    );
};

export default CollapsibleSection;