import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@/components/accordion';
import { PALETTES } from './axis-values';
import type { Entry, Palette } from './types';

export const accordion: Entry = {
  slug: 'accordion',
  name: 'Accordion',
  group: 'Disclosure',
  description:
    'Stacked sections that expand one at a time (`type="single"`) or independently (`type="multiple"`). Only the chevron carries palette colour, which is why the default palette is `secondary` — CBAR draws it turquoise.',
  imports: {
    subpath: 'accordion',
    names: ['Accordion', 'AccordionItem', 'AccordionTrigger', 'AccordionContent'],
  },
  figma: { set: 'Accordion Item', pin: { State: 'Closed' } },

  axes: {
    variant: ['card', 'list'],
    colorPalette: PALETTES,
  },
  defaults: { variant: 'card', colorPalette: 'secondary' },
  /* AccordionProps is a discriminated union — `type="single"` carries
     `collapsible`, `type="multiple"` does not — so a spread PropBag cannot
     satisfy it. The two axes are passed by name instead. */
  render: (props) => (
    <Accordion
      type="single"
      collapsible
      defaultValue="one"
      className="w-56"
      variant={props.variant as 'card' | 'list'}
      colorPalette={props.colorPalette as Palette}
    >
      <AccordionItem value="one">
        <AccordionTrigger>Section</AccordionTrigger>
        <AccordionContent>Body copy.</AccordionContent>
      </AccordionItem>
    </Accordion>
  ),

  matrices: [
    {
      title: 'Variant × colorPalette',
      description:
        '`card` is CBAR\'s shape — each section is its own bordered card with space between. `list` is the kit\'s pre-CBAR shape: flush rows sharing a rule.',
      rows: 'variant',
      cols: 'colorPalette',
    },
  ],

  compositions: [
    {
      name: 'Multiple open at once',
      render: () => (
        <Accordion type="multiple" defaultValue={['a']} className="w-96">
          <AccordionItem value="a">
            <AccordionTrigger>What is in the tarball?</AccordionTrigger>
            <AccordionContent>
              The compiled ESM and CJS bundles, the type declarations, and a prebuilt styles.css.
            </AccordionContent>
          </AccordionItem>
          <AccordionItem value="b">
            <AccordionTrigger>Do I need Tailwind?</AccordionTrigger>
            <AccordionContent>
              No. Import the prebuilt stylesheet. If you do run Tailwind, import theme.css instead
              and you get the tokens alone.
            </AccordionContent>
          </AccordionItem>
        </Accordion>
      ),
    },
  ],
};