'use client';

import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';

/**
 * Single isolated expand/collapse content panel.
 *
 * @description
 * Unlike `<Accordion>`, operates independently and does not control sibling
 * state in the DOM. Use when only one collapsible section is needed on a page.
 *
 * @ai-rules
 * 1. REQUIRES a `<CollapsibleTrigger>` child wrapping a `<Button>` (typically with a Chevron icon) to indicate state.
 * 2. Content goes inside `<CollapsibleContent>` — it will animate in/out on toggle.
 */
function Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
}

function CollapsibleTrigger({
  ...props
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
  return <CollapsiblePrimitive.CollapsibleTrigger data-slot="collapsible-trigger" {...props} />;
}

function CollapsibleContent({
  ...props
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
  return <CollapsiblePrimitive.CollapsibleContent data-slot="collapsible-content" {...props} />;
}

export { Collapsible, CollapsibleTrigger, CollapsibleContent };