import type { Meta, StoryObj } from '@storybook/react';
import { Label } from './Label';

const meta = {
  title: 'Components/Label',
  component: Label,
  tags: ['autodocs'],
  parameters: {
    docs: {
      description: {
        component: 'Typography helper component for headings, body text, caption, error text, and inline code styles.'
      }
    }
  },
  argTypes: {
    variant: {
      description: 'Typography style preset.',
      options: ['h1', 'h2', 'h3', 'h4', 'body', 'body2', 'caption', 'error', 'code'],
      control: 'select',
      table: { type: { summary: "'h1' | 'h2' | 'h3' | 'h4' | 'body' | 'body2' | 'caption' | 'error' | 'code'" } }
    },
    as: {
      description: "Override rendered HTML tag or component (for example `'p'`, `'span'`, `'h2'`).",
      control: false,
      table: { type: { summary: 'ElementType' } }
    },
    className: {
      description: 'Extra CSS classes.',
      control: 'text',
      table: { type: { summary: 'string' } }
    },
    children: {
      description: 'Label content.',
      control: 'text',
      table: { type: { summary: 'ReactNode' } }
    }
  },
  args: {
    variant: 'body',
    children: 'Label text'
  }
} satisfies Meta<typeof Label>;

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

export const Body: Story = {};

export const Error: Story = {
  args: {
    variant: 'error',
    children: 'This field is required'
  }
};

export const Code: Story = {
  args: {
    variant: 'code',
    children: 'const isPublished = true;'
  }
};

export const VariantScale: Story = {
  render: () => (
    <div className="flex max-w-md flex-col gap-2">
      <Label variant="caption">Caption</Label>
      <Label variant="h1">Heading 1</Label>
      <Label variant="h2">Heading 2</Label>
      <Label variant="h3">Heading 3</Label>
      <Label variant="h4">Heading 4</Label>
      <Label variant="body">Primary body copy</Label>
      <Label variant="body2">Secondary body copy</Label>
      <Label variant="error">Error copy</Label>
      <Label variant="code">npm run build</Label>
    </div>
  )
};