import type { Meta, StoryObj } from '@storybook/react-vite';
import { Table } from '../../src/ui/Table/Table';
import { Badge } from '../../src/ui/Badge/Badge';

const meta: Meta<typeof Table> = {
  title: 'UI/Table',
  component: Table,
  tags: ['autodocs'],
  parameters: { layout: 'padded' },
};
export default meta;

interface User {
  id: number;
  name: string;
  email: string;
  status: 'active' | 'inactive';
}

const users: User[] = [
  { id: 1, name: 'Alice Müller',  email: 'alice@example.com',  status: 'active' },
  { id: 2, name: 'Bob Nguyen',    email: 'bob@example.com',    status: 'inactive' },
  { id: 3, name: 'Carol Santos',  email: 'carol@example.com',  status: 'active' },
];

export const Default: StoryObj<typeof Table<User>> = {
  args: {
    data: users,
    rowKey: (u) => u.id,
    emptyMessage: 'No users found.',
    columns: [
      { key: 'id',     header: 'ID',     render: (u) => u.id,    width: 60 },
      { key: 'name',   header: 'Name',   render: (u) => u.name },
      { key: 'email',  header: 'Email',  render: (u) => u.email },
      {
        key: 'status',
        header: 'Status',
        width: 110,
        render: (u) => (
          <Badge variant={u.status === 'active' ? 'success' : 'neutral'}>
            {u.status}
          </Badge>
        ),
      },
    ],
  },
};

export const Loading: StoryObj<typeof Table<User>> = {
  args: {
    ...Default.args,
    loading: true,
  },
};

export const Empty: StoryObj<typeof Table<User>> = {
  args: {
    ...Default.args,
    data: [],
    emptyMessage: 'No users found.',
  },
};

export const SingleRow: StoryObj<typeof Table<User>> = {
  args: {
    ...Default.args,
    data: [users[0]],
  },
};