import Table from '@design-system/Table';
import TableCell from '@design-system/Table/components/TableCell';
import TableHead from '@design-system/Table/components/TableHead';
import { type Meta, type StoryObj } from '@storybook/react';

import TableSkeleton from './index';

type Story = StoryObj<typeof TableSkeleton>;

const meta: Meta<typeof TableSkeleton> = {
  component: TableSkeleton,
  title: 'Composed Components/TableSkeleton',
  tags: ['autodocs'],
  args: {},
  argTypes: {
    rows: {
      control: { type: 'number' },
      defaultValue: 3,
    },
    cols: {
      control: { type: 'number' },
      defaultValue: 3,
    },
  },
  render: args => (
    <Table>
      <TableHead>
        <TableCell>Header 1</TableCell>
        <TableCell>Header 2</TableCell>
        <TableCell>Header 3</TableCell>
      </TableHead>
      <TableSkeleton {...args} />
    </Table>
  ),
};

export const Default: Story = {
  args: { rows: 3, cols: 3 },
};

export default meta;