import { CaretSortIcon } from '@radix-ui/react-icons'
import { Meta, StoryObj } from '@storybook/react-vite'

import { useState } from 'react'

import { Button } from '@components/ui/button/button'

import { Collapse, CollapseContent, CollapseTrigger } from './collapse'

const meta = {
  title: 'Collapse',
  component: Collapse,
  tags: ['autodocs'],
} satisfies Meta<typeof Collapse>

export default meta

function CollapseExample() {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <div className="flex items-center justify-center border rounded p-4">
      <Collapse open={isOpen} onOpenChange={setIsOpen} className="w-[350px] space-y-2">
        <div className="flex items-center justify-between space-x-4 px-4">
          <h4 className="text-sm font-semibold">You have made 3 commits</h4>
          <CollapseTrigger asChild>
            <Button variant="ghost" size="sm">
              <CaretSortIcon className="h-4 w-4" />
              <span className="sr-only">Toggle</span>
            </Button>
          </CollapseTrigger>
        </div>
        <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">@radix-ui/primitives</div>
        <CollapseContent className="space-y-2">
          <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">@radix-ui/colors</div>
          <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">@stitches/react</div>
        </CollapseContent>
      </Collapse>
    </div>
  )
}

export const Default: StoryObj<typeof meta> = {
  parameters: {
    docs: {
      description: {
        story: 'The Collapse component allows you to show and hide content.',
      },
    },
  },
  render: () => <CollapseExample />,
}
