'use client';

import { useGetVehiclesQuery } from '@/store/slice/vehicleApi';
import { FleetCard } from './FleetCard';
import LoadingSpinner from '@/components/loader/LoadingSpinner';

const FleetList = ({
	setEditingVehicle,
}: {
	setEditingVehicle: (vehicle: any) => void;
}) => {
	const { data: vehicles, isLoading } = useGetVehiclesQuery();
	if (isLoading) {
		return (
			<div className="text-center py-12">
				<LoadingSpinner size="md" />
			</div>
		);
	}
	return (
		<>
			{vehicles && vehicles.length === 0 ? (
				<div className="text-center py-12 bg-card border border-border rounded-lg">
					<p className="text-muted-foreground">
						No fleets available at the moment.
					</p>
				</div>
			) : (
				<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
					{vehicles?.map((fleet) => (
						<div key={fleet.id} className="h-full">
							<FleetCard
								fleet={fleet}
								onEdit={() => setEditingVehicle(fleet)}
								onDelete={() => {}}
							/>
						</div>
					))}
				</div>
			)}
		</>
	);
};

export default FleetList;