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

import { Table } from '../Table/Table';
import { TableBody } from '../TableBody/TableBody';
import { TableCell } from '../TableCell/TableCell';
import { TableHeaderCell } from '../TableHeaderCell/TableHeaderCell';
import { TableRow } from '../TableRow/TableRow';

import { TableHeader } from './TableHeader';

const meta: Meta<typeof TableHeader> = {
  title: 'UI kit/Table/TableHeader',
  component: TableHeader,
  tags: ['autodocs'],
  argTypes: {
    children: { control: { disable: true } },
  },
  decorators: [
    Story => (
      <Table>
        <Story />
        <TableBody>
          {[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>
      </Table>
    ),
  ],
};

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

export const Default: Story = {
  args: {},
  render: args => (
    <TableHeader {...args}>
      <TableRow>
        <TableHeaderCell>Header cell 1</TableHeaderCell>
        <TableHeaderCell>Header cell 2</TableHeaderCell>
        <TableHeaderCell>Header cell 3</TableHeaderCell>
        <TableHeaderCell>Header cell 4</TableHeaderCell>
      </TableRow>
    </TableHeader>
  ),
};