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

import { Label } from './label';
import { Input } from '../input/input';
import { Checkbox } from '../checkbox/checkbox';

const meta = {
  title: 'Components/Label',
  component: Label,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component:
          'Form label. Always point `htmlFor` at the control\'s `id` — that is what makes the label clickable and what screen readers use to name the field.',
      },
    },
  },
  tags: ['autodocs'],
  args: { children: 'Email address' },
} satisfies Meta<typeof Label>;

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

export const Default: Story = {};

export const WithInput: Story = {
  render: (args) => (
    <div className="grid w-72 gap-2">
      <Label htmlFor="label-email" {...args} />
      <Input id="label-email" type="email" placeholder="name@example.com" />
    </div>
  ),
};

/**
 * The `peer` class on a sibling control lets the label dim itself when that
 * control is disabled, with no extra state to track.
 */
export const DimsWithDisabledControl: Story = {
  render: () => (
    <div className="flex items-center gap-2">
      <Checkbox id="peer-demo" className="peer" disabled />
      <Label htmlFor="peer-demo">Unavailable option</Label>
    </div>
  ),
};