import type { Meta, StoryObj } from "@storybook/react"
import { Checkbox } from "../check-box"
import { Input } from "../input"
import { Switch } from "../switch"
import { Label } from "./Label"

/**
 * A Label component to provide accessible names for form controls.
 */
const meta = {
  title: "base/form/Label",
  component: Label,
  tags: ["autodocs"],
  parameters: {
    layout: "centered",
  },
} satisfies Meta<typeof Label>

export default meta

type Story = StoryObj<typeof meta>

/**
 * Basic label with text content.
 */
export const Basic: Story = {
  render: () => <Label>Email</Label>,
}

/**
 * Label with custom styling.
 */
export const CustomStyling: Story = {
  render: () => (
    <div className="space-y-4">
      <Label className="text-blue-600">Blue Label</Label>
      <Label className="text-lg font-bold">Bold Label</Label>
      <Label className="italic text-gray-500">Italic Label</Label>
    </div>
  ),
}

/**
 * Label associated with an input field.
 */
export const WithInput: Story = {
  render: () => (
    <div className="grid w-full gap-1.5 max-w-sm">
      <Label htmlFor="email">Email</Label>
      <Input
        id="email"
        type="email"
        placeholder="Enter your email"
        className="border rounded-md px-3 py-2"
      />
    </div>
  ),
}

/**
 * Label used with a checkbox.
 */
export const WithCheckbox: Story = {
  render: () => (
    <div className="flex items-center gap-2">
      <Checkbox id="terms" />
      <Label htmlFor="terms">Accept terms and conditions</Label>
    </div>
  ),
}

/**
 * Label used with a switch.
 */
export const WithSwitch: Story = {
  render: () => (
    <div className="flex items-center gap-2">
      <Switch id="airplane-mode" />
      <Label htmlFor="airplane-mode">Airplane Mode</Label>
    </div>
  ),
}

/**
 * Required label with a visual indicator.
 */
export const Required: Story = {
  render: () => (
    <div className="grid w-full gap-1.5 max-w-sm">
      <Label htmlFor="username">
        Username <span className="text-destructive">*</span>
      </Label>
      <Input
        id="username"
        required
        placeholder="Enter username"
        className="border rounded-md px-3 py-2"
      />
    </div>
  ),
}

/**
 * Disabled label that shows it's not interactive.
 */
export const Disabled: Story = {
  render: () => (
    <div className="space-y-4">
      <div className="grid w-full gap-1.5 max-w-sm opacity-50">
        <Label htmlFor="disabled-input" className="cursor-not-allowed">
          Name
        </Label>
        <Input
          id="disabled-input"
          disabled
          placeholder="Disabled input"
          className="border rounded-md px-3 py-2"
        />
      </div>

      <div className="flex items-center gap-2">
        <Checkbox id="disabled-checkbox" disabled />
        <Label htmlFor="disabled-checkbox" className="cursor-not-allowed opacity-50">
          Disabled checkbox option
        </Label>
      </div>
    </div>
  ),
}