# Card

## Description

A flexible container component that groups related content and actions in a coherent unit. Cards provide structure and visual hierarchy for presenting information, making them ideal for displaying content blocks, product information, user profiles, and interactive elements.

## Aliases

- Card
- Panel
- Container
- Content Block
- Info Card

## Props Breakdown

**Extends:** Standalone interface (no HTML element inheritance)

| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `children` | `ReactNode` | - | Yes | The content to be displayed within the card |
| `className` | `string` | - | No | Additional CSS class names |

## Examples

### Basic Usage
```tsx
import { Card, Text } from '@delightui/components';

function BasicExample() {
  return (
    <Card>
      <Text type="Heading3">Welcome</Text>
      <Text>This is a simple card with some content inside.</Text>
    </Card>
  );
}
```

### Card with Header and Content
```tsx
import { Card, Text, Button } from '@delightui/components';

function HeaderContentExample() {
  return (
    <Card>
      <div className="card-header">
        <Text type="Heading4">Project Overview</Text>
        <Text type="BodySmall" className="card-subtitle">
          Last updated 2 hours ago
        </Text>
      </div>
      
      <div className="card-content">
        <Text>
          This project includes a comprehensive component library 
          with design system integration and accessibility features.
        </Text>
      </div>
      
      <div className="card-actions">
        <Button size="Small">View Details</Button>
        <Button size="Small" type="Outlined">Edit</Button>
      </div>
    </Card>
  );
}
```

### Product Card
```tsx
import { Card, Image, Text, Button, Chip } from '@delightui/components';

function ProductCardExample() {
  return (
    <Card className="product-card">
      <Image 
        src="/product-image.jpg"
        alt="Product"
        aspectRatio="16/9"
      />
      
      <div className="card-body">
        <div className="card-header">
          <Text type="Heading5">Premium Headphones</Text>
          <Chip size="Small" style="A">New</Chip>
        </div>
        
        <Text type="BodySmall" className="card-description">
          Wireless noise-cancelling headphones with premium sound quality
          and 30-hour battery life.
        </Text>
        
        <div className="card-pricing">
          <Text type="Heading6">$299.99</Text>
          <Text type="BodySmall" className="original-price">$399.99</Text>
        </div>
        
        <div className="card-actions">
          <Button>Add to Cart</Button>
          <Button type="Outlined">View Details</Button>
        </div>
      </div>
    </Card>
  );
}
```

### User Profile Card
```tsx
import { Card, Image, Text, Button, Icon } from '@delightui/components';

function UserProfileExample() {
  return (
    <Card className="profile-card">
      <div className="profile-header">
        <Image 
          src="/avatar.jpg"
          alt="User Avatar"
          className="profile-avatar"
        />
        
        <div className="profile-info">
          <Text type="Heading5">John Doe</Text>
          <Text type="BodySmall">Senior Developer</Text>
          <Text type="BodySmall" className="profile-location">
            <Icon icon="Location" size="Small" />
            San Francisco, CA
          </Text>
        </div>
      </div>
      
      <div className="profile-stats">
        <div className="stat">
          <Text type="Heading6">127</Text>
          <Text type="BodySmall">Projects</Text>
        </div>
        <div className="stat">
          <Text type="Heading6">1.2k</Text>
          <Text type="BodySmall">Followers</Text>
        </div>
        <div className="stat">
          <Text type="Heading6">89</Text>
          <Text type="BodySmall">Following</Text>
        </div>
      </div>
      
      <div className="card-actions">
        <Button>Follow</Button>
        <Button type="Outlined">Message</Button>
      </div>
    </Card>
  );
}
```

### Interactive Card
```tsx
function InteractiveCardExample() {
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <Card className="interactive-card">
      <div 
        className="card-clickable-header"
        onClick={() => setIsExpanded(!isExpanded)}
      >
        <Text type="Heading5">Expandable Content</Text>
        <Icon 
          icon={isExpanded ? "ExpandLess" : "ExpandMore"} 
          className="expand-icon"
        />
      </div>
      
      {isExpanded && (
        <div className="card-expandable-content">
          <Text>
            This content is revealed when the card header is clicked.
            You can include any content here including forms, lists,
            or other interactive elements.
          </Text>
          
          <div className="card-actions">
            <Button size="Small">Action 1</Button>
            <Button size="Small" type="Outlined">Action 2</Button>
          </div>
        </div>
      )}
    </Card>
  );
}
```

### Card Grid Layout
```tsx
function CardGridExample() {
  const items = [
    { title: "Analytics", description: "View detailed analytics", icon: "BarChart" },
    { title: "Settings", description: "Manage your preferences", icon: "Settings" },
    { title: "Help", description: "Get support and documentation", icon: "Help" },
    { title: "Profile", description: "Update your profile information", icon: "Person" }
  ];

  return (
    <div className="card-grid">
      {items.map((item, index) => (
        <Card key={index} className="feature-card">
          <div className="card-icon">
            <Icon icon={item.icon} size="Large" />
          </div>
          
          <div className="card-content">
            <Text type="Heading6">{item.title}</Text>
            <Text type="BodySmall">{item.description}</Text>
          </div>
          
          <div className="card-action">
            <Button size="Small" type="Ghost">
              <Icon icon="ArrowForward" size="Small" />
            </Button>
          </div>
        </Card>
      ))}
    </div>
  );
}
```

### Card with Form
```tsx
import { Card, Text, FormField, Input, Button, Form } from '@delightui/components';

function FormCardExample() {
  const handleSubmit = (values, setError) => {
    console.log('Form submitted:', values);
  };

  return (
    <Card className="form-card">
      <div className="card-header">
        <Text type="Heading4">Contact Us</Text>
        <Text type="BodySmall">
          We'd love to hear from you. Send us a message!
        </Text>
      </div>
      
      <Form onSubmit={handleSubmit}>
        <FormField name="name" label="Name" required>
          <Input placeholder="Your name" />
        </FormField>
        
        <FormField name="email" label="Email" required>
          <Input inputType="Email" placeholder="your@email.com" />
        </FormField>
        
        <FormField name="message" label="Message" required>
          <TextArea 
            placeholder="Your message..." 
            rows={4}
          />
        </FormField>
        
        <div className="card-actions">
          <Button actionType="submit">Send Message</Button>
          <Button type="Outlined" actionType="reset">Clear</Button>
        </div>
      </Form>
    </Card>
  );
}
```

### Custom Styled Cards
```tsx
function CustomStyledExample() {
  return (
    <div className="custom-cards">
      <Card className="success-card">
        <Icon icon="Check" className="status-icon" />
        <Text type="Heading6">Success!</Text>
        <Text type="BodySmall">Your action was completed successfully.</Text>
      </Card>
      
      <Card className="warning-card">
        <Icon icon="Warning" className="status-icon" />
        <Text type="Heading6">Warning</Text>
        <Text type="BodySmall">Please review before proceeding.</Text>
      </Card>
      
      <Card className="error-card">
        <Icon icon="Error" className="status-icon" />
        <Text type="Heading6">Error</Text>
        <Text type="BodySmall">Something went wrong. Please try again.</Text>
      </Card>
    </div>
  );
}
```