import React from 'react'

import type { Meta, StoryObj } from '@storybook/react'
import { Accordion } from '../components'
import { DataAccordion } from '../types'
import { Typography } from '@mui/material'

const data: DataAccordion[] = [
  {
    label: 'Accordion 1',
    id: 'panel-1',
    children: (
      <Typography>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit
        amet blandit leo lobortis eget.
      </Typography>
    ),
  },
  {
    label: 'Accordion 2',
    id: 'panel-2',
    children: (
      <Typography>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit
        amet blandit leo lobortis eget.
      </Typography>
    ),
  },
]

const meta = {
  title: 'Display/Accordion',
  component: Accordion,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: {
    data: data,
  },
} satisfies Meta<typeof Accordion>

export default meta

type Story = StoryObj<typeof meta>

export const AccordionBasic = () => {
  return (
    <div style={{ width: '480px', marginBottom: 30 }}>
      <Accordion data={data} />
    </div>
  )
}

AccordionBasic.storyName = 'Accordion Basic'

export const AccordionExpanded = () => {
  return (
    <div style={{ width: '480px', marginBottom: 30 }}>
      <Accordion data={data} defaultExpanded="panel-1" />
    </div>
  )
}

AccordionExpanded.storyName = 'Accordion Expanded'