import { Card } from '@primitivekit/react';

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

// Elevated (with shadow)
<Card variant="elevated">
  Elevated card with shadow
</Card>

// Outlined (with border)
<Card variant="outlined">
  Outlined card with border
</Card>

// Filled (with background)
<Card variant="filled">
  Filled card with background
</Card>

<Card hoverable>
  Hover over me for effect
</Card>

<Card 
  clickable 
  onClick={() => alert('Card clicked!')}
>
  Click me
</Card>

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

<Card
  style={{
    '--card-bg-color': 'rgba(240, 240, 255, 1)',
    '--card-border-color': 'rgba(100, 100, 200, 1)',
    '--card-border-radius': '16px',
    '--card-padding': '24px',
    '--card-box-shadow': '0 4px 12px rgba(0, 0, 0, 0.1)',
  }}
>
  Custom styled card
</Card>

<Card hoverable clickable onClick={() => navigate('/product/1')}>
  <img src="/product.jpg" alt="Product" />
  <h3>Product Name</h3>
  <p>$99.99</p>
  <Button>Add to Cart</Button>
</Card>

<Card variant="outlined">
  <Card.Header>
    <Avatar src="/avatar.jpg" />
    <h3>John Doe</h3>
  </Card.Header>
  
  <Card.Body>
    <p>Software Engineer</p>
    <p>San Francisco, CA</p>
  </Card.Body>
  
  <Card.Footer>
    <Button variant="outline">Follow</Button>
    <Button>Message</Button>
  </Card.Footer>
</Card>