Input

import * as React from "react"
import { Input } from "@/components/ui/input";

const SearchIcon = () => (
  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
    <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
  </svg>
)

const MailIcon = () => (
  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
    <path strokeLinecap="round" strokeLinejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
  </svg>
)

export default function InputDemo() {
  const [value, setValue] = React.useState("")

  return (
    <div className="flex flex-col gap-8 p-6 max-w-md">
      {/* Basic */}
      <div className="space-y-3">
        <h3 className="text-sm font-medium text-zinc-500">Basic Input</h3>
        <Input placeholder="Enter text..." />
      </div>

      {/* With Label */}
      <div className="space-y-3">
        <h3 className="text-sm font-medium text-zinc-500">With Label</h3>
        <Input label="Email" type="email" placeholder="email@example.com" />
      </div>

      {/* With Icons */}
      <div className="space-y-3">
        <h3 className="text-sm font-medium text-zinc-500">With Icons</h3>
        <Input label="Search" placeholder="Search..." startContent={<SearchIcon />} />
        <Input label="Email" placeholder="email@example.com" startContent={<MailIcon />} />
      </div>

      {/* With Description */}
      <div className="space-y-3">
        <h3 className="text-sm font-medium text-zinc-500">With Description</h3>
        <Input 
          label="Username" 
          placeholder="johndoe" 
          description="This will be your public display name"
        />
      </div>

      {/* With Error */}
      <div className="space-y-3">
        <h3 className="text-sm font-medium text-zinc-500">With Error</h3>
        <Input 
          label="Email" 
          placeholder="email@example.com" 
          error="Please enter a valid email address"
        />
      </div>

      {/* Disabled */}
      <div className="space-y-3">
        <h3 className="text-sm font-medium text-zinc-500">Disabled</h3>
        <Input label="Disabled" placeholder="Cannot edit" disabled />
      </div>

      {/* Controlled */}
      <div className="space-y-3">
        <h3 className="text-sm font-medium text-zinc-500">Controlled</h3>
        <Input 
          label="Controlled Input" 
          value={value}
          onChange={(e) => setValue(e.target.value)}
          placeholder="Type something..."
        />
        <p className="text-xs text-zinc-500">Value: {value || "(empty)"}</p>
      </div>
    </div>
  )
}