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

import { Table } from '../Table/Table';
import { TableCell } from '../TableCell/TableCell';
import { TableHeader } from '../TableHeader/TableHeader';
import { TableRow } from '../TableRow/TableRow';

import { TableBody } from './TableBody';

const meta: Meta<typeof TableBody> = {
  title: 'UI kit/Table/TableBody',
  component: TableBody,
  tags: ['autodocs'],
  decorators: [
    Story => (
      <Table>
        <TableHeader>
          <TableRow>
            <th>Header cell 1</th>
            <th>Header cell 2</th>
            <th>Header cell 3</th>
            <th>Header cell 4</th>
          </TableRow>
        </TableHeader>
        <Story />
      </Table>
    ),
  ],
  argTypes: {
    children: { control: { disable: true } },
  },
};

export default meta;
type Story = StoryObj<typeof TableBody>;

export const Default: Story = {
  args: {},
  render: args => (
    <TableBody {...args}>
      {[1, 2, 3, 4].map(item => (
        <TableRow key={item}>
          <TableCell>{`Row ${item}, cell 1`}</TableCell>
          <TableCell>{`Row ${item}, cell 2`}</TableCell>
          <TableCell>{`Row ${item}, cell 3`}</TableCell>
          <TableCell>{`Row ${item}, cell 4`}</TableCell>
        </TableRow>
      ))}
    </TableBody>
  ),
};

export const Empty: Story = {
  args: {},
  render: args => (
    <TableBody {...args}>
      <TableBody.Empty colspan={4} />
    </TableBody>
  ),
};