import StatusBadge from '../components/StatusBadge';

export default {
  title: 'Components/StatusBadge',
  component: StatusBadge,
  tags: ['autodocs'],
  argTypes: {
    status: {
      description: 'Reservation status value',
      control: { type: 'select' },
      options: ['confirmed', 'pending', 'cancelled'],
    },
    size: {
      description: 'Badge size variant',
      control: { type: 'select' },
      options: ['sm', 'md', 'lg'],
    },
  },
};

export const Confirmed = {
  args: { status: 'confirmed', size: 'md' },
};

export const Pending = {
  args: { status: 'pending', size: 'md' },
};

export const Cancelled = {
  args: { status: 'cancelled', size: 'md' },
};

export const SizeSmall = {
  args: { status: 'confirmed', size: 'sm' },
  name: 'Size — Small',
};

export const SizeLarge = {
  args: { status: 'pending', size: 'lg' },
  name: 'Size — Large',
};

export const AllStatuses = {
  name: 'All statuses',
  render: () => (
    <div style={{ display: 'flex', gap: '12px', alignItems: 'center', flexWrap: 'wrap' }}>
      <StatusBadge status="confirmed" />
      <StatusBadge status="pending" />
      <StatusBadge status="cancelled" />
    </div>
  ),
};

export const AllSizes = {
  name: 'All sizes',
  render: () => (
    <div style={{ display: 'flex', gap: '12px', alignItems: 'center', flexWrap: 'wrap' }}>
      <StatusBadge status="confirmed" size="sm" />
      <StatusBadge status="confirmed" size="md" />
      <StatusBadge status="confirmed" size="lg" />
    </div>
  ),
};