Input

import { Input } from '@/components/ui/input'
import { Search, Lock, Eye, EyeOff } from 'lucide-react'

export default function Example() {
  const [showPassword, setShowPassword] = useState(false)

  return (
    <>
      {/* Basic input */}
      <Input placeholder="Enter text..." />

      {/* With size */}
      <Input inputSize="sm" placeholder="Small" />
      <Input inputSize="md" placeholder="Medium" />
      <Input inputSize="lg" placeholder="Large" />

      {/* With error state */}
      <Input variant="error" placeholder="Invalid input" />

      {/* With left icon */}
      <Input
        leftIcon={<Search className="w-4 h-4" />}
        placeholder="Search..."
      />

      {/* With right element (toggle) */}
      <Input
        type={showPassword ? 'text' : 'password'}
        leftIcon={<Lock className="w-4 h-4" />}
        rightElement={
          <button onClick={() => setShowPassword(!showPassword)}>
            {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
          </button>
        }
        placeholder="Password"
      />

      {/* Different types */}
      <Input type="email" placeholder="Email" />
      <Input type="tel" placeholder="Phone" />
      <Input type="number" placeholder="Number" />
    </>
  )
}