# ActionCard

## Description

An interactive card component that serves as a clickable container for navigation and actions. Combines the visual structure of a card with the functionality of a link or button, supporting both internal routing and external navigation while maintaining accessibility and user experience standards.

## Aliases

- ActionCard
- ClickableCard
- NavigationCard
- LinkCard
- InteractiveCard

## Props Breakdown

**Extends:** `HTMLAttributes<HTMLDivElement>` & `Omit<LinkProps, 'to'>`

| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `children` | `ReactNode` | - | Yes | The content to be displayed within the action card |
| `disabled` | `boolean` | `false` | No | Specifies if the action card is disabled |
| `className` | `string` | - | No | Additional CSS class names |
| `to` | `string \| -1` | - | No | Destination URL or path for navigation. External URLs (starting with 'https') render as anchor tags, internal paths use router navigation |

## Examples

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

function BasicExample() {
  return (
    <ActionCard to="/dashboard">
      <div className="action-card-content">
        <Icon icon="Dashboard" size="Large" />
        <Text type="Heading6">Dashboard</Text>
        <Text type="BodySmall">View your analytics and metrics</Text>
      </div>
    </ActionCard>
  );
}
```

### Feature Cards Grid
```tsx
function FeatureCardsExample() {
  const features = [
    {
      icon: "Analytics",
      title: "Analytics",
      description: "Track your performance metrics",
      path: "/analytics"
    },
    {
      icon: "Settings",
      title: "Settings",
      description: "Manage your preferences",
      path: "/settings"
    },
    {
      icon: "Users",
      title: "Team",
      description: "Collaborate with your team",
      path: "/team"
    },
    {
      icon: "Help",
      title: "Support",
      description: "Get help when you need it",
      path: "/support"
    }
  ];

  return (
    <div className="feature-grid">
      {features.map((feature, index) => (
        <ActionCard key={index} to={feature.path} className="feature-card">
          <div className="card-icon">
            <Icon icon={feature.icon} size="Large" />
          </div>
          <div className="card-content">
            <Text type="Heading6">{feature.title}</Text>
            <Text type="BodySmall">{feature.description}</Text>
          </div>
          <div className="card-arrow">
            <Icon icon="ArrowForward" size="Small" />
          </div>
        </ActionCard>
      ))}
    </div>
  );
}
```

### Product Cards
```tsx
function ProductCardsExample() {
  const products = [
    {
      id: 1,
      name: "Premium Headphones",
      price: "$299.99",
      image: "/headphones.jpg",
      rating: 4.8,
      inStock: true
    },
    {
      id: 2,
      name: "Wireless Speaker",
      price: "$159.99",
      image: "/speaker.jpg",
      rating: 4.6,
      inStock: false
    }
  ];

  return (
    <div className="product-grid">
      {products.map(product => (
        <ActionCard 
          key={product.id} 
          to={`/products/${product.id}`}
          disabled={!product.inStock}
          className="product-card"
        >
          <div className="product-image">
            <Image src={product.image} alt={product.name} />
            {!product.inStock && (
              <div className="out-of-stock-overlay">
                <Chip size="Small" style="C">Out of Stock</Chip>
              </div>
            )}
          </div>
          
          <div className="product-info">
            <Text type="Heading6">{product.name}</Text>
            <div className="product-rating">
              <Icon icon="Star" size="Small" />
              <Text type="BodySmall">{product.rating}</Text>
            </div>
            <Text type="Heading6" className="product-price">
              {product.price}
            </Text>
          </div>
        </ActionCard>
      ))}
    </div>
  );
}
```

### External Link Cards
```tsx
function ExternalLinksExample() {
  const externalResources = [
    {
      title: "GitHub Repository",
      description: "View our open source code",
      url: "https://github.com/company/project",
      icon: "GitHub"
    },
    {
      title: "Documentation",
      description: "Read the full documentation",
      url: "https://docs.company.com",
      icon: "Book"
    },
    {
      title: "Community Forum",
      description: "Join the discussion",
      url: "https://community.company.com",
      icon: "Forum"
    }
  ];

  return (
    <div className="external-links">
      {externalResources.map((resource, index) => (
        <ActionCard key={index} to={resource.url} className="external-link-card">
          <div className="link-content">
            <div className="link-header">
              <Icon icon={resource.icon} />
              <Text type="Heading6">{resource.title}</Text>
              <Icon icon="ExternalLink" size="Small" />
            </div>
            <Text type="BodySmall">{resource.description}</Text>
          </div>
        </ActionCard>
      ))}
    </div>
  );
}
```

### Service Cards with Status
```tsx
function ServiceCardsExample() {
  const services = [
    {
      name: "API Gateway",
      status: "active",
      uptime: "99.9%",
      path: "/services/api-gateway"
    },
    {
      name: "Database",
      status: "warning",
      uptime: "98.5%",
      path: "/services/database"
    },
    {
      name: "Message Queue",
      status: "error",
      uptime: "95.2%",
      path: "/services/message-queue"
    }
  ];

  const getStatusColor = (status) => {
    switch (status) {
      case 'active': return 'A';
      case 'warning': return 'B';
      case 'error': return 'C';
      default: return 'B';
    }
  };

  return (
    <div className="service-cards">
      {services.map((service, index) => (
        <ActionCard key={index} to={service.path} className="service-card">
          <div className="service-header">
            <Text type="Heading6">{service.name}</Text>
            <Chip size="Small" style={getStatusColor(service.status)}>
              {service.status}
            </Chip>
          </div>
          
          <div className="service-metrics">
            <div className="metric">
              <Text type="BodySmall">Uptime</Text>
              <Text type="Heading6">{service.uptime}</Text>
            </div>
          </div>
          
          <div className="service-actions">
            <Text type="BodySmall">Click to view details</Text>
            <Icon icon="ArrowForward" size="Small" />
          </div>
        </ActionCard>
      ))}
    </div>
  );
}
```

### User Profile Cards
```tsx
function UserProfileCardsExample() {
  const users = [
    {
      id: 1,
      name: "Sarah Johnson",
      role: "Product Manager",
      avatar: "/sarah.jpg",
      online: true,
      projects: 12
    },
    {
      id: 2,
      name: "Mike Chen",
      role: "Developer",
      avatar: "/mike.jpg",
      online: false,
      projects: 8
    },
    {
      id: 3,
      name: "Emily Davis",
      role: "Designer",
      avatar: "/emily.jpg",
      online: true,
      projects: 15
    }
  ];

  return (
    <div className="user-cards">
      {users.map(user => (
        <ActionCard key={user.id} to={`/users/${user.id}`} className="user-card">
          <div className="user-avatar">
            <Image src={user.avatar} alt={user.name} className="avatar-image" />
            <div className={`status-indicator ${user.online ? 'online' : 'offline'}`} />
          </div>
          
          <div className="user-info">
            <Text type="Heading6">{user.name}</Text>
            <Text type="BodySmall">{user.role}</Text>
            
            <div className="user-stats">
              <Text type="BodySmall">{user.projects} projects</Text>
              <Text type="BodySmall">{user.online ? 'Online' : 'Offline'}</Text>
            </div>
          </div>
          
          <div className="user-actions">
            <IconButton icon="Message" size="Small" />
            <IconButton icon="MoreVertical" size="Small" />
          </div>
        </ActionCard>
      ))}
    </div>
  );
}
```

### Quick Actions Dashboard
```tsx
function QuickActionsExample() {
  const quickActions = [
    {
      title: "Create New Project",
      description: "Start a new project from template",
      path: "/projects/new",
      icon: "Add",
      color: "primary"
    },
    {
      title: "Import Data",
      description: "Import existing data files",
      path: "/import",
      icon: "Upload",
      color: "secondary"
    },
    {
      title: "Generate Report",
      description: "Create a new analytics report",
      path: "/reports/new",
      icon: "BarChart",
      color: "tertiary"
    },
    {
      title: "Invite Team Member",
      description: "Add someone to your team",
      path: "/team/invite",
      icon: "PersonAdd",
      color: "success"
    }
  ];

  return (
    <div className="quick-actions-grid">
      {quickActions.map((action, index) => (
        <ActionCard 
          key={index} 
          to={action.path} 
          className={`quick-action-card ${action.color}`}
        >
          <div className="action-icon">
            <Icon icon={action.icon} size="Large" />
          </div>
          
          <div className="action-content">
            <Text type="Heading6">{action.title}</Text>
            <Text type="BodySmall">{action.description}</Text>
          </div>
          
          <div className="action-indicator">
            <Icon icon="ArrowForward" size="Small" />
          </div>
        </ActionCard>
      ))}
    </div>
  );
}
```

### Interactive Dashboard Cards
```tsx
function InteractiveDashboardExample() {
  const [cardData, setCardData] = useState({
    revenue: { value: '$24,500', change: '+12%' },
    users: { value: '1,234', change: '+5%' },
    orders: { value: '89', change: '-2%' },
    conversion: { value: '3.4%', change: '+0.8%' }
  });

  return (
    <div className="dashboard-cards">
      <ActionCard to="/analytics/revenue" className="metric-card revenue">
        <div className="metric-header">
          <Icon icon="TrendingUp" />
          <Text type="BodySmall">Revenue</Text>
        </div>
        
        <div className="metric-value">
          <Text type="Heading4">{cardData.revenue.value}</Text>
          <Chip size="Small" style="A">{cardData.revenue.change}</Chip>
        </div>
        
        <div className="metric-footer">
          <Text type="BodySmall">vs last month</Text>
          <Icon icon="ArrowForward" size="Small" />
        </div>
      </ActionCard>
      
      <ActionCard to="/analytics/users" className="metric-card users">
        <div className="metric-header">
          <Icon icon="Users" />
          <Text type="BodySmall">Active Users</Text>
        </div>
        
        <div className="metric-value">
          <Text type="Heading4">{cardData.users.value}</Text>
          <Chip size="Small" style="A">{cardData.users.change}</Chip>
        </div>
        
        <div className="metric-footer">
          <Text type="BodySmall">this week</Text>
          <Icon icon="ArrowForward" size="Small" />
        </div>
      </ActionCard>
      
      <ActionCard to="/analytics/orders" className="metric-card orders">
        <div className="metric-header">
          <Icon icon="Package" />
          <Text type="BodySmall">Orders</Text>
        </div>
        
        <div className="metric-value">
          <Text type="Heading4">{cardData.orders.value}</Text>
          <Chip size="Small" style="C">{cardData.orders.change}</Chip>
        </div>
        
        <div className="metric-footer">
          <Text type="BodySmall">today</Text>
          <Icon icon="ArrowForward" size="Small" />
        </div>
      </ActionCard>
    </div>
  );
}
```

### Disabled and Loading States
```tsx
function StateVariationsExample() {
  const [loading, setLoading] = useState(false);

  return (
    <div className="state-cards">
      <ActionCard to="/available" className="available-card">
        <div className="card-content">
          <Icon icon="Check" />
          <Text type="Heading6">Available Action</Text>
          <Text type="BodySmall">This card is interactive</Text>
        </div>
      </ActionCard>
      
      <ActionCard disabled className="disabled-card">
        <div className="card-content">
          <Icon icon="Lock" />
          <Text type="Heading6">Disabled Action</Text>
          <Text type="BodySmall">This card is disabled</Text>
        </div>
      </ActionCard>
      
      <ActionCard 
        to={loading ? undefined : "/action"}
        className="loading-card"
        onClick={() => {
          setLoading(true);
          setTimeout(() => setLoading(false), 2000);
        }}
      >
        <div className="card-content">
          {loading ? (
            <>
              <Spinner size="Small" />
              <Text type="Heading6">Loading...</Text>
              <Text type="BodySmall">Please wait</Text>
            </>
          ) : (
            <>
              <Icon icon="Refresh" />
              <Text type="Heading6">Refresh Data</Text>
              <Text type="BodySmall">Click to reload</Text>
            </>
          )}
        </div>
      </ActionCard>
    </div>
  );
}
```

### Complex Content Cards
```tsx
function ComplexContentExample() {
  return (
    <div className="complex-cards">
      <ActionCard to="/projects/1" className="project-card">
        <div className="project-header">
          <div className="project-info">
            <Text type="Heading5">Website Redesign</Text>
            <Text type="BodySmall">Due: March 15, 2024</Text>
          </div>
          <Chip size="Small" style="B">In Progress</Chip>
        </div>
        
        <div className="project-description">
          <Text type="BodyMedium">
            Complete redesign of the company website with modern UI/UX
            and improved performance.
          </Text>
        </div>
        
        <div className="project-team">
          <Text type="BodySmall">Team:</Text>
          <div className="team-avatars">
            <Image src="/team1.jpg" alt="Team member" className="team-avatar" />
            <Image src="/team2.jpg" alt="Team member" className="team-avatar" />
            <Image src="/team3.jpg" alt="Team member" className="team-avatar" />
            <div className="team-count">+3</div>
          </div>
        </div>
        
        <div className="project-progress">
          <div className="progress-header">
            <Text type="BodySmall">Progress</Text>
            <Text type="BodySmall">68%</Text>
          </div>
          <ProgressBar value={68} />
        </div>
        
        <div className="project-tags">
          <Chip size="Small" style="A">Design</Chip>
          <Chip size="Small" style="A">Frontend</Chip>
          <Chip size="Small" style="A">High Priority</Chip>
        </div>
      </ActionCard>
    </div>
  );
}
```