import React from 'react';
import type { Meta, StoryObj } from '@storybook/react-vite';

import { Accordion } from './Accordion';

const meta: Meta<typeof Accordion> = {
  title: 'UI kit/Accordion',
  component: Accordion,
  tags: ['autodocs'],
};
export default meta;
type Story = StoryObj<typeof Accordion>;

export const Default: Story = {
  argTypes: { children: { control: false } },
  args: {},
  render: args => (
    <Accordion {...args}>
      <Accordion.Item title='Item 1'>This is my content 1</Accordion.Item>
      <Accordion.Item title='Item 2'>This is my content 2</Accordion.Item>
      <Accordion.Item title='Item 3'>This is my content 3</Accordion.Item>
    </Accordion>
  ),
};

export const Dense: Story = {
  args: { dense: true },
  render: args => (
    <Accordion {...args}>
      <Accordion.Item title='Item 1'>This is my content 1</Accordion.Item>
      <Accordion.Item title='Item 2'>This is my content 2</Accordion.Item>
      <Accordion.Item title='Item 3'>This is my content 3</Accordion.Item>
    </Accordion>
  ),
};

export const SingleExpand: Story = {
  args: { divider: 'topBottom', multiple: false },
  render: args => (
    <Accordion {...args}>
      <Accordion.Item title='Item 1'>I will be closed when the other item is open.</Accordion.Item>
      <Accordion.Item title='Item 2'>I will be closed when the other item is open.</Accordion.Item>
      <Accordion.Item title='Item 3'>I will be closed when the other item is open.</Accordion.Item>
    </Accordion>
  ),
};

export const WithTopAndBottomDivider: Story = {
  args: { divider: 'topBottom' },
  render: args => (
    <Accordion {...args}>
      <Accordion.Item title='I already have campaigns on Google, can I also use Shoptet Campaigns?'>
        Yes, you can leverage Shoptet Campaigns in addition to your existing campaigns on Google.
      </Accordion.Item>
      <Accordion.Item title='I already have an advertising account, can I use it?'>
        Before we launch your advertisement, please review and examine everything to see how and where it will appear
        within the Google advertising system. Once you approve everything, Google will begin approving the ads before
        publishing them. This process may take several hours to two days. Therefore, we ask for your patience.
      </Accordion.Item>
      <Accordion.Item title='Will I have access to the account where the campaigns are running?'>
        Yes, you will have access to the account where the campaigns are running.
      </Accordion.Item>
      <Accordion.Item title='Can I pause or adjust my campaigns after they are launched?'>
        Yes, campaigns can be updated over time based on your business goals and current performance.
      </Accordion.Item>
    </Accordion>
  ),
};

export const WithBackground: Story = {
  args: { withBackground: true },
  render: args => (
    <Accordion {...args}>
      <Accordion.Item title='Item 1'>This is my content 1</Accordion.Item>
      <Accordion.Item title='Item 2'>This is my content 2</Accordion.Item>
      <Accordion.Item title='Item 3'>This is my content 3</Accordion.Item>
    </Accordion>
  ),
};

export const WithTopDividerAndBackground: Story = {
  args: { withBackground: true, divider: 'top' },
  render: args => (
    <Accordion {...args}>
      <Accordion.Item title='Item 1'>This is my content 1</Accordion.Item>
      <Accordion.Item title='Item 2'>This is my content 2</Accordion.Item>
      <Accordion.Item title='Item 3'>This is my content 3</Accordion.Item>
    </Accordion>
  ),
};

export const WithTopDivider: Story = {
  args: { divider: 'top' },
  render: args => (
    <Accordion {...args}>
      <Accordion.Item title='Item 1'>This is my content 1</Accordion.Item>
      <Accordion.Item title='Item 2'>This is my content 2</Accordion.Item>
      <Accordion.Item title='Item 3'>This is my content 3</Accordion.Item>
    </Accordion>
  ),
};

export const WithBottomDivider: Story = {
  args: { divider: 'bottom' },
  render: args => (
    <Accordion {...args}>
      <Accordion.Item title='Item 1'>This is my content 1</Accordion.Item>
      <Accordion.Item title='Item 2'>This is my content 2</Accordion.Item>
      <Accordion.Item title='Item 3'>This is my content 3</Accordion.Item>
    </Accordion>
  ),
};