Card

import { Card } from 'poodle'

<Card>
  <h3>Card Title</h3>
  <p>This is a basic card component with some content inside.</p>
</Card>

<Card>
  <Card.Header>
    <h3>Card Header</h3>
  </Card.Header>
  <Card.Body>
    <p>Card body content goes here.</p>
  </Card.Body>
  <Card.Footer>
    <Button>Action</Button>
  </Card.Footer>
</Card>

<Card hoverable>
  <h3>Hover Me</h3>
  <p>This card has a hover effect.</p>
</Card>

<div className="grid grid-cols-3 gap-4">
  <Card>
    <h3>Design</h3>
    <p>Beautiful UI components</p>
  </Card>
  <Card>
    <h3>Performance</h3>
    <p>Lightning fast</p>
  </Card>
  <Card>
    <h3>Customizable</h3>
    <p>Easy to customize</p>
  </Card>
</div>

<Card className="max-w-sm">
  <img src="/product.jpg" alt="Product" />
  <Badge>New</Badge>
  <h3>Product Name</h3>
  <p>A brief description of the product.</p>
  <div className="flex justify-between items-center">
    <span className="text-2xl font-bold">$99</span>
    <Button>Buy Now</Button>
  </div>
</Card>

function StatsCard() {
  return (
    <Card>
      <h4 className="text-gray-500 text-sm">Total Users</h4>
      <p className="text-3xl font-bold mt-2">12,345</p>
      <div className="text-green-600 text-sm mt-2">
        ↑ 12% from last month
      </div>
    </Card>
  )
}

function FeatureCard() {
  return (
    <Card hoverable className="text-center">
      <div className="text-4xl mb-4">🚀</div>
      <h3 className="text-xl font-bold mb-2">Fast Performance</h3>
      <p className="text-gray-600">
        Optimized for speed and efficiency
      </p>
    </Card>
  )
}

function ProfileCard() {
  return (
    <Card>
      <div className="flex items-center gap-4">
        <img
          src="/avatar.jpg"
          alt="User"
          className="w-16 h-16 rounded-full"
        />
        <div>
          <h3 className="font-bold">John Doe</h3>
          <p className="text-gray-600">Software Engineer</p>
        </div>
      </div>
      <div className="mt-4 flex gap-2">
        <Button variant="outline" size="sm">
          Message
        </Button>
        <Button size="sm">Follow</Button>
      </div>
    </Card>
  )
}