import React from 'react';
import {Meta, StoryObj} from '@storybook/react';
import Slot from '@components/_HuGo/Slot';

import {Accordion, AccordionProps} from './index';

interface StoryArgs extends AccordionProps {
  title: string;
  description: string;
  topText: string;
  pillText: string;
}

const meta: Meta<StoryArgs> = {
  title: 'HuGo/Accordion',
  component: Accordion,
  argTypes: {
    title: {control: 'text'},
    description: {control: 'text'},
    topText: {control: 'text'},
    pillText: {control: 'text'},
    withBackground: {control: 'boolean'},
    initialCollapsed: {control: 'boolean'},
    disabled: {control: 'boolean'},
  },
  render: (args: StoryArgs) => (
    <Accordion
      withBackground={args.withBackground}
      initialCollapsed={args.initialCollapsed}
      disabled={args.disabled}>
      <Accordion.Header>
        <Accordion.Title
          title={args.title}
          description={args.description}
          topText={args.topText}
        />
        {args.pillText && <Accordion.Pill text={args.pillText} />}
        <Accordion.Icon />
      </Accordion.Header>
      <Accordion.Content>
        <Slot />
      </Accordion.Content>
    </Accordion>
  ),
};

type Story = StoryObj<StoryArgs>;

export const AccordionComponent: Story = {
  args: {
    title: 'This is the title',
    description: 'This is the description',
    pillText: 'State',
    withBackground: true,
    initialCollapsed: false,
    disabled: false,
  },
};

export default meta;
