import type { Meta, StoryObj } from 'storybook-react-rsbuild';
import {
  Card,
  List,
  Row,
  Table,
  THead,
  TBody,
  Tr,
  Th,
  Td,
  Badge,
  Chip,
} from '../components/ui';

const meta = {
  title: 'Data Display/Surfaces',
  component: Card,
  parameters: {
    docs: {
      description: {
        component: 'Cards, selectable lists/rows, badges, chips, and the bordered table.',
      },
    },
  },
  argTypes: {
    className: { control: 'text' },
  },
} satisfies Meta<typeof Card>;

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

export const CardPlayground: Story = {
  name: 'Card',
  args: { children: 'Card content' },
  render: (args) => (
    <Card {...args} style={{ maxWidth: 320, padding: 20 }}>
      <h3 className="mta-h3">Storage</h3>
      <p className="mta-body">128 GB of 256 GB used.</p>
    </Card>
  ),
};

export const ListRows: Story = {
  render: () => (
    <List style={{ width: 320 }}>
      <Row selected>General</Row>
      <Row>Appearance</Row>
      <Row>Notifications</Row>
      <Row>Privacy</Row>
    </List>
  ),
};

export const BadgeShowcase: Story = {
  render: () => (
    <div style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
      <Badge variant="lime">Lime</Badge>
      <Badge variant="ember">Ember</Badge>
      <Badge variant="neutral">Neutral</Badge>
      <Badge variant="outline">Outline</Badge>
      <Badge variant="lime" dot>Online</Badge>
    </div>
  ),
};

export const Chips: Story = {
  render: () => (
    <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
      <Chip>Design</Chip>
      <Chip onRemove={() => {}}>Removable</Chip>
    </div>
  ),
};

export const DataTable: Story = {
  render: () => (
    <Table>
      <THead>
        <Tr>
          <Th>Device</Th>
          <Th>Status</Th>
          <Th>Battery</Th>
        </Tr>
      </THead>
      <TBody>
        <Tr selected>
          <Td>MacBook Pro</Td>
          <Td><Badge variant="lime" dot>Online</Badge></Td>
          <Td>82%</Td>
        </Tr>
        <Tr>
          <Td>iPhone 16</Td>
          <Td><Badge variant="neutral">Idle</Badge></Td>
          <Td>54%</Td>
        </Tr>
      </TBody>
    </Table>
  ),
};
