import type { Meta, StoryObj } from '@storybook/react';
import { Label } from './label';
import { Input } from '../input';
import { Checkbox } from '../checkbox';
import React from 'react';

const meta: Meta<typeof Label> = {
  title: 'UI/Label',
  component: Label,
  render: args => <Label {...args} />,
  argTypes: {
    children: {
      control: 'text',
      description: 'The text content of the label.',
    },
    htmlFor: {
      control: 'text',
      description: 'The ID of the input this label is for.',
    },
    size: {
      control: 'select',
      options: ['sm', 'md', 'lg'],
      description: 'Size variant — matches the form sizing scale.',
    },
  },
};

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

export const Default: Story = {
  args: {
    children: 'Accept terms and conditions',
  },
  render: args => (
    <div>
      <div className="flex items-center space-x-2">
        <Checkbox id="terms" size={args.size} />
        <Label {...args} htmlFor="terms" />
      </div>
    </div>
  ),
};

export const WithInput: Story = {
  render: () => (
    <div className="grid w-full max-w-sm items-center gap-1.5">
      <Label htmlFor="email">Email</Label>
      <Input type="email" id="email" placeholder="Email" />
    </div>
  ),
};

/**
 * Size comparison: sm, md (default), lg.
 */
export const Sizes: Story = {
  render: () => (
    <div className="flex flex-col gap-4">
      <div className="flex flex-col gap-1">
        <Label size="sm">Small Label (sm)</Label>
        <Input size="sm" placeholder="Small input" />
      </div>
      <div className="flex flex-col gap-1">
        <Label size="md">Medium Label (md — default)</Label>
        <Input size="md" placeholder="Medium input" />
      </div>
      <div className="flex flex-col gap-1">
        <Label size="lg">Large Label (lg)</Label>
        <Input size="lg" placeholder="Large input" />
      </div>
    </div>
  ),
};