import Collapsible from '@/lib/components/Collapsible';
import { commonArgTypes } from '@/lib/constants';
import type { Meta, StoryObj } from '@storybook/vue3';
import { Icon } from '@iconify/vue';

const meta = {
  title: 'Layout Component/Collapsible',
  component: Collapsible.Root,
  parameters: {
    layout: 'centered',
    themes: {
      themeOverride: 'dark'
    },
    docs: {
      description: {
        component: ''
      }
    }
  },
  argTypes: {}
} as Meta;

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {
  render: (args, { argTypes }) => ({
    components: {
      CollapsibleContent: Collapsible.Content,
      CollapsibleRoot: Collapsible.Root,
      CollapsibleTrigger: Collapsible.Trigger,
      Icon
    },
    setup() {
      return { args };
    },
    template: `
  <CollapsibleRoot
    v-model:open="open"
    class="w-[300px]"
  >
    <div style="display: flex; align-items: center; justify-content: space-between">
      <span class="text-[15px] text-black leading-[25px]"> @peduarte starred 3 repos </span>
      <CollapsibleTrigger class='cursor-default rounded-full h-[25px] w-[25px] inline-flex items-center justify-center bg-black text-white' >
        <Icon
          v-if="open"
          icon="radix-icons:cross-2"
          class="h-3.5 w-3.5"
        />
        <Icon
          v-else
          icon="radix-icons:row-spacing"
          class="h-3.5 w-3.5"
        />
      </CollapsibleTrigger>
    </div>
    <CollapsibleContent >
      <div class=" rounded my-[10px] p-[10px] shadow-[0_2px_10px] shadow-blackA7">
        <span class="text-black text-[15px] leading-[25px]">@vuejs/core</span>
      </div>
    </CollapsibleContent>
  </CollapsibleRoot>`
  })
};