import React, { useState } from 'react';
import { ChevronDown } from 'lucide-react';
interface CollapsibleSectionProps {
/** Section title */
title: string;
/** Optional icon before title */
icon?: React.ReactNode;
/** Whether the section starts open */
defaultOpen?: boolean;
/** Children rendered inside the collapsible body */
children: React.ReactNode;
/** Badge text shown to the right, e.g. "3 activos" */
badge?: string | number;
/** Extra className for the outer wrapper */
className?: string;
}
/**
* CollapsibleSection — Reusable collapsible panel section.
*
* Used across the app to separate "basic" (always visible) controls from
* "advanced" (collapsible) ones, reducing visual clutter.
*
* Usage:
* ```tsx
*
*
*
*
* ```
*/
export const CollapsibleSection: React.FC = ({
title,
icon,
defaultOpen = false,
children,
badge,
className = '',
}) => {
const [isOpen, setIsOpen] = useState(defaultOpen);
return (
);
};