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 { TableHeader } from '../TableHeader/TableHeader';
import { TableHeaderCell } from '../TableHeaderCell/TableHeaderCell';

import { TableRow } from './TableRow';

const meta: Meta<typeof TableRow> = {
  title: 'UI kit/Table/TableRow',
  component: TableRow,
  tags: ['autodocs'],
};

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

export const Default: Story = {
  args: {},
  argTypes: {
    type: { control: 'select', options: ['alert', 'attention', 'error', 'muted', 'success'] },
  },
  render: args => (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHeaderCell>Header cell 2</TableHeaderCell>
          <TableHeaderCell>Header cell 3</TableHeaderCell>
          <TableHeaderCell>Header cell 4</TableHeaderCell>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow {...args}>
          <TableCell>Row 1, body cell 1</TableCell>
          <TableCell>Row 1, body cell 2</TableCell>
          <TableCell>Row 1, body cell 3</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  ),
};