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

const meta: Meta<typeof Card> = {
  title: 'UI/Card',
  component: Card,
  parameters: { layout: 'centered' },
  tags: ['autodocs'],
  decorators: [
    (Story) => (
      <div style={{ width: 360 }}>
        <Story />
      </div>
    ),
  ],
  argTypes: {
    padding: { control: 'select', options: ['sm', 'md', 'lg'] },
    headerVariant: { control: 'select', options: ['primary', 'secondary'] },
  },
};
export default meta;
type Story = StoryObj<typeof Card>;

export const Default: Story = {
  args: { children: 'Card content goes here.', padding: 'md' },
};

export const WithPrimaryHeader: Story = {
  args: {
    header: 'Section Title',
    headerVariant: 'primary',
    children: 'Card content with a primary header.',
  },
};

export const WithSecondaryHeader: Story = {
  args: {
    header: 'Section Title',
    headerVariant: 'secondary',
    children: 'Card content with a secondary header.',
  },
};

export const WithFooter: Story = {
  args: {
    header: 'My Card',
    headerVariant: 'primary',
    children: 'Card body content.',
    footer: 'Last updated 2 minutes ago',
  },
};

export const ScenarioCard: Story = {
  render: () => (
    <Card>
      <div
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'flex-start',
          marginBottom: 8,
        }}
      >
        <span style={{ fontWeight: 600, fontSize: 14 }}>Login flow</span>
        <Badge variant="success" dot>
          Passed
        </Badge>
      </div>
      <p style={{ margin: '0 0 16px', fontSize: 13, color: 'var(--color-text-muted)' }}>
        Last run 2 minutes ago · 4 steps
      </p>
      <div style={{ display: 'flex', gap: 8 }}>
        <Button size="sm" variant="primary">
          Run
        </Button>
        <Button size="sm" variant="ghost">
          Edit
        </Button>
      </div>
    </Card>
  ),
};