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

<Card>
  <h2>Card Title</h2>
  <p>Card content goes here</p>
</Card>

// With title and description
<Card 
  title="Premium Plan"
  description="Best for professionals"
>
  <p>$29/month</p>
</Card>

// With footer
<Card 
  title="Product"
  footer={<Button>Buy Now</Button>}
>
  <p>Product details</p>
</Card>

// Pricing card
<Card className="border-primary">
  <div className="text-center">
    <h3 className="text-2xl font-bold">Pro Plan</h3>
    <p className="text-4xl font-bold my-4">$29<span className="text-sm">/mo</span></p>
    <ul className="space-y-2 mb-4">
      <li>✓ Unlimited projects</li>
      <li>✓ Priority support</li>
      <li>✓ Advanced analytics</li>
    </ul>
    <Button fullWidth>Get Started</Button>
  </div>
</Card>

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

<Alert variant="info">
  This is an informational message.
</Alert>

<Alert variant="info">Information message</Alert>
<Alert variant="success">Success message</Alert>
<Alert variant="warning">Warning message</Alert>
<Alert variant="error">Error message</Alert>

// Custom icon
<Alert variant="info" icon={<Star />}>
  Custom icon alert
</Alert>

// With action
<Alert variant="warning">
  <div className="flex items-center justify-between">
    <span>Your trial expires in 3 days</span>
    <Button size="sm">Upgrade</Button>
  </div>
</Alert>

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

<StatusBadge status="active" variant="success" />

// Order statuses
<StatusBadge status="pending" variant="warning" label="Pending" />
<StatusBadge status="processing" variant="info" label="Processing" />
<StatusBadge status="delivered" variant="success" label="Delivered" />
<StatusBadge status="cancelled" variant="error" label="Cancelled" />

// User statuses
<StatusBadge status="active" variant="success" label="Active" />
<StatusBadge status="suspended" variant="warning" label="Suspended" />
<StatusBadge status="banned" variant="error" label="Banned" />

// Different sizes
<StatusBadge status="small" size="sm" label="Small" />
<StatusBadge status="medium" size="md" label="Medium" />
<StatusBadge status="large" size="lg" label="Large" />

import { StatCard, StatsGrid } from '@/components/ui/StatsCard'

<StatCard 
  label="Total Users"
  value="1,234"
  icon={Users}
  color="text-primary"
/>

import { Users, ShoppingCart, DollarSign, TrendingUp } from 'lucide-react'

// Single stat
<StatCard 
  label="Revenue"
  value="$12,345"
  icon={DollarSign}
  color="text-success"
/>

// Stats grid
<StatsGrid columns={4}>
  <StatCard 
    label="Total Users" 
    value="1,234" 
    icon={Users}
    color="text-primary"
  />
  <StatCard 
    label="Orders" 
    value="567" 
    icon={ShoppingCart}
    color="text-success"
  />
  <StatCard 
    label="Revenue" 
    value="$12,345" 
    icon={DollarSign}
    color="text-warning"
  />
  <StatCard 
    label="Growth" 
    value="+23%" 
    icon={TrendingUp}
    color="text-info"
  />
</StatsGrid>

// Different grid layouts
<StatsGrid columns={2}>
  <StatCard label="Users" value="1,234" icon={Users} />
  <StatCard label="Orders" value="567" icon={ShoppingCart} />
</StatsGrid>

<StatsGrid columns={3}>
  <StatCard label="Users" value="1,234" icon={Users} />
  <StatCard label="Orders" value="567" icon={ShoppingCart} />
  <StatCard label="Revenue" value="$12,345" icon={DollarSign} />
</StatsGrid>

import { toast } from '@/lib/utils/toast'
import { ToastContainer } from '@/components/ui/Toast'

// Add ToastContainer to your layout
<ToastContainer />

// Show toast
toast.success('Operation successful!')
toast.error('Something went wrong')
toast.info('Information message')
toast.warning('Warning message')

toast.success('Message', {
  duration: 5000, // 5 seconds
  position: 'top-center',
})

// Different variants
toast.info('Profile updated')
toast.success('Payment successful!')
toast.warning('Session expiring soon')
toast.error('Failed to save changes')

// Custom duration
toast.info('Quick message', { duration: 1000 })
toast.info('Long message', { duration: 10000 })

// Different positions
toast.info('Top Start', { position: 'top-start' })
toast.info('Top Center', { position: 'top-center' })
toast.info('Top End', { position: 'top-end' })
toast.info('Bottom Start', { position: 'bottom-start' })
toast.info('Bottom Center', { position: 'bottom-center' })
toast.info('Bottom End', { position: 'bottom-end' })

// Real-world examples
const handleSave = async () => {
  try {
    await saveProfile()
    toast.success('Profile updated successfully!')
  } catch (error) {
    toast.error('Failed to update profile')
  }
}

const handleDelete = async () => {
  if (confirm('Are you sure?')) {
    await deleteItem()
    toast.success('Item deleted')
  }
}

import { StatCard, StatsGrid } from '@/components/ui/StatsCard'
import { Card } from '@/components/ui/Card'
import { Alert } from '@/components/ui/Alert'
import { StatusBadge } from '@/components/ui/StatusBadge'
import { Users, ShoppingCart, DollarSign, TrendingUp } from 'lucide-react'

export function Dashboard() {
  return (
    <div className="space-y-6">
      {/* Alert */}
      <Alert variant="info">
        Welcome back! You have 3 new orders today.
      </Alert>
      
      {/* Stats */}
      <StatsGrid columns={4}>
        <StatCard 
          label="Total Users" 
          value="1,234" 
          icon={Users}
          color="text-primary"
        />
        <StatCard 
          label="Orders" 
          value="567" 
          icon={ShoppingCart}
          color="text-success"
        />
        <StatCard 
          label="Revenue" 
          value="$12,345" 
          icon={DollarSign}
          color="text-warning"
        />
        <StatCard 
          label="Growth" 
          value="+23%" 
          icon={TrendingUp}
          color="text-info"
        />
      </StatsGrid>
      
      {/* Recent Orders */}
      <Card title="Recent Orders">
        <div className="space-y-2">
          {orders.map(order => (
            <div key={order.id} className="flex items-center justify-between p-3 bg-base-200 rounded">
              <div>
                <p className="font-medium">{order.product}</p>
                <p className="text-sm opacity-60">{order.customer}</p>
              </div>
              <div className="text-right">
                <p className="font-bold">${order.amount}</p>
                <StatusBadge 
                  status={order.status} 
                  variant={order.status === 'completed' ? 'success' : 'warning'}
                  label={order.status}
                  size="sm"
                />
              </div>
            </div>
          ))}
        </div>
      </Card>
    </div>
  )
}