/**
 * @ai-summary Skeleton loading component for mobile vehicles screen
 * @ai-context React 19 Suspense fallback optimized for mobile interface
 */

import React from 'react';
import { Skeleton } from '@mui/material';
import { GlassCard } from '../mobile/GlassCard';

export const MobileVehiclesSkeleton: React.FC = () => {
  return (
    <div className="space-y-4">
      {/* Header skeleton */}
      <div className="flex justify-between items-center mb-6">
        <Skeleton variant="text" width={120} height={32} />
        <Skeleton variant="circular" width={40} height={40} />
      </div>

      {/* Mobile vehicle cards skeleton */}
      {Array.from({ length: 4 }).map((_, index) => (
        <GlassCard key={index}>
          <div className="flex items-center space-x-4 p-4">
            {/* Vehicle icon */}
            <Skeleton variant="circular" width={48} height={48} />
            
            <div className="flex-1 space-y-2">
              {/* Vehicle name */}
              <Skeleton variant="text" width="60%" height={20} />
              {/* Vehicle details */}
              <Skeleton variant="text" width="80%" height={16} />
              <Skeleton variant="text" width="40%" height={16} />
            </div>
            
            {/* Action button */}
            <Skeleton variant="circular" width={32} height={32} />
          </div>
        </GlassCard>
      ))}

      {/* Add button skeleton */}
      <div className="fixed bottom-20 right-4">
        <Skeleton variant="circular" width={56} height={56} />
      </div>
    </div>
  );
};