# Service Card Component

## Overview
The `service-card` component is a reusable Blade component designed to display service statistics in a clean, modern card format with hover effects and tooltips.

## Usage

### Basic Usage
```blade
<x-service-card 
    icon="box"
    iconColor="text-green-400"
    badgeColor="bg-green-400"
    title="Services"
    value="5"
    label="Active Services"
    tooltip="Total active services"
/>
```

### With Animation Delay
```blade
<x-service-card 
    icon="credit-card"
    iconColor="text-primary"
    badgeColor="bg-primary"
    title="Balance"
    value="1,000,000 đ"
    label="Account Balance"
    tooltip="Current account balance"
    :animationDelay="0.2"
/>
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `icon` | string | `'box'` | Lucide icon name |
| `iconColor` | string | `'text-green-400'` | Tailwind CSS color class for icon |
| `badgeColor` | string | `'bg-green-400'` | Tailwind CSS color class for badge |
| `title` | string | `''` | Badge title text |
| `value` | mixed | `0` | Main value to display |
| `label` | string | `''` | Label text below value |
| `tooltip` | string | `''` | Tooltip text on hover |
| `animationDelay` | float | `0` | Animation delay in seconds |

## Features

- **Responsive Design**: Adapts to different screen sizes
- **Hover Effects**: Scale animation on hover
- **Tooltips**: Alpine.js powered tooltips with smooth transitions
- **Animation**: Staggered fade-in animations
- **Accessibility**: Proper ARIA attributes and keyboard navigation
- **Internationalization**: Supports Laravel's translation system

## Styling

The component uses Tailwind CSS classes and includes:
- Shadow effects
- Rounded corners
- Smooth transitions
- Background decorations
- Responsive grid layout

## Dependencies

- **Laravel Blade**: For component rendering
- **Tailwind CSS**: For styling
- **Alpine.js**: For interactive features
- **Lucide Icons**: For icon display
- **Animate.css**: For animations (optional)

## Example Implementation

```php
// In your controller
$serviceCards = [
    [
        'icon' => 'box',
        'iconColor' => 'text-green-400',
        'badgeColor' => 'bg-green-400',
        'title' => __('Services'),
        'value' => count($services),
        'label' => __('Services'),
        'tooltip' => __('Total active services')
    ],
    // ... more cards
];

return view('dashboard', compact('serviceCards'));
```

```blade
<!-- In your Blade view -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-5">
    @foreach($serviceCards as $index => $card)
        <x-service-card 
            :icon="$card['icon']"
            :iconColor="$card['iconColor']"
            :badgeColor="$card['badgeColor']"
            :title="$card['title']"
            :value="$card['value']"
            :label="$card['label']"
            :tooltip="$card['tooltip']"
            :animationDelay="$index * 0.1"
        />
    @endforeach
</div>
```

## Customization

You can customize the component by:
1. Modifying the component file directly
2. Publishing the component to your app directory
3. Creating a new component that extends this one
4. Using CSS custom properties for theming

## Best Practices

1. **Use meaningful icons**: Choose Lucide icons that represent the data
2. **Consistent colors**: Use a consistent color scheme across cards
3. **Proper translations**: Always use Laravel's translation system
4. **Accessible text**: Provide meaningful tooltips and labels
5. **Performance**: Keep animation delays reasonable (0.1s intervals)
6. **Mobile-first**: Ensure cards work well on mobile devices