motovaultpro/frontend/src/features/dashboard/components/SummaryCards.tsx

/**
 * @ai-summary Summary cards showing key dashboard metrics
 */

import React from 'react';
import { Box } from '@mui/material';
import DirectionsCarRoundedIcon from '@mui/icons-material/DirectionsCarRounded';
import BuildRoundedIcon from '@mui/icons-material/BuildRounded';
import LocalGasStationRoundedIcon from '@mui/icons-material/LocalGasStationRounded';
import { GlassCard } from '../../../shared-minimal/components/mobile/GlassCard';
import { DashboardSummary } from '../types';

interface SummaryCardsProps {
  summary: DashboardSummary;
}

export const SummaryCards: React.FC<SummaryCardsProps> = ({ summary }) => {
  const cards = [
    {
      title: 'Total Vehicles',
      value: summary.totalVehicles,
      icon: DirectionsCarRoundedIcon,
      color: 'primary.main',
    },
    {
      title: 'Upcoming Maintenance',
      value: summary.upcomingMaintenanceCount,
      subtitle: 'Next 30 days',
      icon: BuildRoundedIcon,
      color: 'primary.main',
    },
    {
      title: 'Recent Fuel Logs',
      value: summary.recentFuelLogsCount,
      subtitle: 'Last 7 days',
      icon: LocalGasStationRoundedIcon,
      color: 'primary.main',
    },
  ];

  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
      {cards.map((card) => {
        const IconComponent = card.icon;
        return (
          <GlassCard key={card.title} padding="md">
            <div className="flex items-start gap-3">
              <Box
                sx={{
                  flexShrink: 0,
                  width: 48,
                  height: 48,
                  borderRadius: 3,
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  bgcolor: 'action.hover',
                }}
              >
                <IconComponent sx={{ fontSize: 24, color: card.color }} />
              </Box>
              <div className="flex-1 min-w-0">
                <p className="text-sm text-slate-500 dark:text-titanio font-medium mb-1">
                  {card.title}
                </p>
                <Box
                  component="p"
                  sx={{
                    fontSize: '1.875rem',
                    fontWeight: 700,
                    color: 'text.primary',
                    lineHeight: 1.2,
                  }}
                >
                  {card.value}
                </Box>
                {card.subtitle && (
                  <p className="text-xs text-slate-400 dark:text-canna mt-1">
                    {card.subtitle}
                  </p>
                )}
              </div>
            </div>
          </GlassCard>
        );
      })}
    </div>
  );
};

export const SummaryCardsSkeleton: React.FC = () => {
  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
      {[1, 2, 3].map((i) => (
        <GlassCard key={i} padding="md">
          <div className="flex items-start gap-3">
            <div className="flex-shrink-0 w-12 h-12 rounded-xl bg-slate-100 dark:bg-slate-800 animate-pulse" />
            <div className="flex-1 min-w-0 space-y-2">
              <div className="h-4 bg-slate-100 dark:bg-slate-800 rounded animate-pulse w-24" />
              <div className="h-8 bg-slate-100 dark:bg-slate-800 rounded animate-pulse w-16" />
              <div className="h-3 bg-slate-100 dark:bg-slate-800 rounded animate-pulse w-20" />
            </div>
          </div>
        </GlassCard>
      ))}
    </div>
  );
};