import { View } from 'react-native';
import type { Meta, StoryObj } from '@storybook/react';

import { Badge } from './Badge';
import type { BadgeTone } from './Badge.types';

const meta = {
  title: 'Atoms/Badge',
  component: Badge,
  parameters: { layout: 'centered' },
  argTypes: {
    tone: {
      control: { type: 'select' },
      options: ['default', 'secondary', 'success', 'warning', 'danger', 'outline', 'muted'],
    },
  },
  args: { children: 'Estado', tone: 'default' },
} satisfies Meta<typeof Badge>;

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

export const Default: Story = {};
export const Success: Story = { args: { tone: 'success', children: 'Activo' } };
export const Danger: Story = { args: { tone: 'danger', children: 'Bloqueado' } };

const tones: BadgeTone[] = [
  'default',
  'secondary',
  'success',
  'warning',
  'danger',
  'outline',
  'muted',
];

export const AllTones: Story = {
  render: () => (
    <View className="flex-row flex-wrap gap-2">
      {tones.map((tone) => (
        <Badge key={tone} tone={tone}>
          {tone}
        </Badge>
      ))}
    </View>
  ),
};