import type { Meta, StoryObj } from '@storybook/react-vite'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'

const meta = {
  title: 'UI/Inputs',
  component: Input,
} satisfies Meta<typeof Input>

export default meta
type Story = StoryObj<typeof meta>

export const Form: Story = {
  render: () => (
    <div className="max-w-sm space-y-4">
      <div className="space-y-1.5">
        <Label htmlFor="host">Host address</Label>
        <Input id="host" placeholder="192.168.1.173" />
      </div>
      <div className="space-y-1.5">
        <Label htmlFor="pin">Pairing PIN</Label>
        <Input id="pin" inputMode="numeric" maxLength={4} placeholder="0000" />
      </div>
      <div className="space-y-1.5">
        <Label htmlFor="disabled">Disabled</Label>
        <Input id="disabled" disabled placeholder="unavailable" />
      </div>
    </div>
  ),
}