import React from 'react'

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

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

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

export default meta

type Story = StoryObj<typeof meta>

export const Playground: Story = {
  args: {
    data: data,
  },
}

export const TabsBasic = () => {
  return (
    <div style={{ width: '480px', marginBottom: 30 }}>
      <Tabs data={data} onChange={(e, value) => console.log(e, value)} />
    </div>
  )
}

TabsBasic.storyName = 'Tabs Basic'