/**
 * @ai-summary Skeleton loading component for vehicle list
 * @ai-context React 19 Suspense fallback component for better loading UX
 */

import React from 'react';
import { Box, Skeleton, Grid } from '@mui/material';

export const VehicleListSkeleton: React.FC = () => {
  return (
    <Box sx={{ py: 2 }}>
      {/* Header skeleton */}
      <Box sx={{ 
        display: 'flex', 
        justifyContent: 'space-between', 
        alignItems: 'center', 
        mb: 4 
      }}>
        <Skeleton variant="text" width={200} height={40} />
        <Skeleton variant="rounded" width={140} height={40} />
      </Box>

      {/* Vehicle cards skeleton */}
      <Grid container spacing={3}>
        {Array.from({ length: 6 }).map((_, index) => (
          <Grid item xs={12} md={6} lg={4} key={index}>
            <Box sx={{ 
              border: '1px solid', 
              borderColor: 'divider', 
              borderRadius: 2, 
              p: 2 
            }}>
              {/* Vehicle image skeleton */}
              <Skeleton variant="rectangular" width="100%" height={120} sx={{ mb: 2, borderRadius: 1 }} />
              
              {/* Vehicle name */}
              <Skeleton variant="text" width="80%" height={24} sx={{ mb: 1 }} />
              
              {/* Vehicle details */}
              <Skeleton variant="text" width="60%" height={20} sx={{ mb: 1 }} />
              <Skeleton variant="text" width="70%" height={20} sx={{ mb: 2 }} />
              
              {/* Action buttons */}
              <Box sx={{ display: 'flex', gap: 1 }}>
                <Skeleton variant="rounded" width={60} height={32} />
                <Skeleton variant="rounded" width={60} height={32} />
              </Box>
            </Box>
          </Grid>
        ))}
      </Grid>
    </Box>
  );
};