/**
 * @ai-summary Skeleton loading component for individual vehicle card
 * @ai-context React 19 Suspense fallback for vehicle card loading
 */

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

export const VehicleCardSkeleton: React.FC = () => {
  return (
    <Box sx={{ 
      border: '1px solid', 
      borderColor: 'divider', 
      borderRadius: 2, 
      p: 2,
      height: '280px',
      display: 'flex',
      flexDirection: 'column'
    }}>
      {/* Vehicle image skeleton */}
      <Skeleton 
        variant="rectangular" 
        width="100%" 
        height={120} 
        sx={{ mb: 2, borderRadius: 1, flexShrink: 0 }} 
      />
      
      {/* Vehicle name */}
      <Skeleton 
        variant="text" 
        width="80%" 
        height={28} 
        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, flex: 1 }} 
      />
      
      {/* Action buttons */}
      <Box sx={{ display: 'flex', gap: 1, mt: 'auto' }}>
        <Skeleton variant="rounded" width={70} height={32} />
        <Skeleton variant="rounded" width={70} height={32} />
      </Box>
    </Box>
  );
};