Input

import { Input, FormControl, Button } from '@codeconnect-llc/design-system'
import { useState } from 'react'

export function LoginForm() {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')

  const handleSubmit = (e) => {
    e.preventDefault()
    console.log({ email, password })
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-6 max-w-md">
      <FormControl label="メールアドレス" htmlFor="email" required>
        <Input
          id="email"
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          placeholder="your@email.com"
        />
      </FormControl>

      <FormControl label="パスワード" htmlFor="password" required>
        <Input
          id="password"
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          placeholder="パスワード"
        />
      </FormControl>

      <Button type="submit" variant="primary" size="lg" className="w-full">
        ログイン
      </Button>
    </form>
  )
}