/**
 * @ai-summary Mobile-optimized vehicle card component with Material Design 3
 */

import React from 'react';
import { Card, CardActionArea, Box, Typography } from '@mui/material';
import { Vehicle } from '../types/vehicles.types';
import { VehicleImage } from '../components/VehicleImage';
import { getVehicleLabel, getVehicleSubtitle } from '@/core/utils/vehicleDisplay';

interface VehicleMobileCardProps {
  vehicle: Vehicle;
  onClick?: (vehicle: Vehicle) => void;
  compact?: boolean;
}

export const VehicleMobileCard: React.FC<VehicleMobileCardProps> = ({
  vehicle,
  onClick,
  compact = false
}) => {
  const displayName = getVehicleLabel(vehicle);
  const subtitle = getVehicleSubtitle(vehicle);
  
  return (
    <Card 
      sx={{ 
        borderRadius: 2, 
        overflow: 'hidden', 
        minWidth: compact ? 260 : 'auto',
        width: compact ? 260 : '100%'
      }}
    >
      <CardActionArea onClick={() => onClick?.(vehicle)}>
        <Box sx={{ p: 2 }}>
          <VehicleImage vehicle={vehicle} height={120} />
          <Typography variant="h6" sx={{ fontWeight: 700, mb: 0.5 }}>
            {displayName}
          </Typography>
          {subtitle && (
            <Typography variant="body2" color="text.secondary">
              {subtitle}
            </Typography>
          )}
          {vehicle.licensePlate && (
            <Typography variant="caption" color="text.secondary" sx={{ mt: 1, display: 'block' }}>
              {vehicle.licensePlate}
            </Typography>
          )}
        </Box>
      </CardActionArea>
    </Card>
  );
};
