import { Button } from '@/components/ui/Button'

<Button variant="primary">Click Me</Button>

// Different variants
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="success">Success</Button>
<Button variant="error">Error</Button>

// With icons
<Button leftIcon={<Plus />}>Add Item</Button>
<Button rightIcon={<Download />}>Download</Button>

// Loading state
<Button loading>Loading...</Button>

// Full width
<Button fullWidth>Full Width</Button>

import { Input } from '@/components/ui/Input'

<Input 
  label="Email" 
  placeholder="your@email.com"
  type="email"
/>

// With label
<Input label="Username" placeholder="Enter username" />

// With error
<Input 
  label="Email" 
  error="Email is required"
  value=""
/>

// With hint
<Input 
  label="Password"
  type="password"
  hint="Must be at least 8 characters"
/>

// With icons
<Input 
  label="Email"
  leftIcon={<Mail />}
  placeholder="your@email.com"
/>

<Input 
  label="Search"
  leftIcon={<Search />}
  rightIcon={<span>⌘K</span>}
/>

import { DateTimePicker } from '@/components/ui/DateTimePicker'

const [date, setDate] = useState<Date | null>(null)

<DateTimePicker 
  selected={date}
  onChange={setDate}
/>

const [date, setDate] = useState<Date | null>(null)

// Basic picker
<DateTimePicker 
  selected={date}
  onChange={setDate}
  placeholder="Select date"
/>

// Future dates only
<DateTimePicker 
  selected={date}
  onChange={setDate}
  minDate={new Date()}
  placeholder="Schedule for future"
/>

// In a form
<fieldset className="fieldset">
  <label className="label">Event Date</label>
  <DateTimePicker 
    selected={date}
    onChange={setDate}
  />
</fieldset>

import { ImageUpload } from '@/components/ui/ImageUpload'

const [imageUrl, setImageUrl] = useState('')

<ImageUpload 
  value={imageUrl}
  onChange={setImageUrl}
  label="Product Image"
/>

const [url, setUrl] = useState('')

// Basic upload
<ImageUpload 
  value={url}
  onChange={setUrl}
  label="Avatar"
/>

// Custom max size
<ImageUpload 
  value={url}
  onChange={setUrl}
  label="Banner"
  maxSize={10}
/>

// With existing image
<ImageUpload 
  value="https://example.com/image.jpg"
  onChange={setUrl}
  label="Product Image"
/>

import { useState } from 'react'
import { Button } from '@/components/ui/Button'
import { Input } from '@/components/ui/Input'
import { DateTimePicker } from '@/components/ui/DateTimePicker'
import { ImageUpload } from '@/components/ui/ImageUpload'

export function ProductForm() {
  const [name, setName] = useState('')
  const [price, setPrice] = useState('')
  const [image, setImage] = useState('')
  const [releaseDate, setReleaseDate] = useState<Date | null>(null)
  const [loading, setLoading] = useState(false)
  
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)
    
    try {
      await createProduct({ name, price, image, releaseDate })
      // Success
    } catch (error) {
      // Error
    } finally {
      setLoading(false)
    }
  }
  
  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <Input
        label="Product Name"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Enter product name"
        required
      />
      
      <Input
        label="Price"
        type="number"
        value={price}
        onChange={(e) => setPrice(e.target.value)}
        placeholder="0.00"
        leftIcon={<span>$</span>}
        required
      />
      
      <ImageUpload
        label="Product Image"
        value={image}
        onChange={setImage}
      />
      
      <fieldset className="fieldset">
        <label className="label">Release Date</label>
        <DateTimePicker
          selected={releaseDate}
          onChange={setReleaseDate}
          minDate={new Date()}
          placeholder="Select release date"
        />
      </fieldset>
      
      <div className="flex gap-2">
        <Button type="submit" loading={loading}>
          Create Product
        </Button>
        <Button type="button" variant="ghost">
          Cancel
        </Button>
      </div>
    </form>
  )
}