'use client';

import { Car } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';
import { Progress } from '@/components/ui/progress';
import { TabsContent } from '@/components/ui/tabs';
import type { DashboardStats } from '../_type/type';

interface FleetTabProps {
	stats: DashboardStats | null;
	isLoading: boolean;
}

const FleetTab: React.FC<FleetTabProps> = ({ stats, isLoading }) => {
	return (
		<TabsContent value="fleet" className="space-y-4">
			<div className="grid gap-4 md:grid-cols-2">
				{/* Vehicle Utilization */}
				<Card>
					<CardHeader>
						<CardTitle>Vehicle Utilization</CardTitle>
					</CardHeader>
					<CardContent>
						{isLoading || !stats ? (
							<Skeleton className="h-40 w-full" />
						) : (
							<div className="space-y-4">
								{stats.vehicles.utilization.map((v) => (
									<div key={v.vehicle} className="space-y-1">
										<div className="flex items-center justify-between text-sm">
											<span>{v.vehicle}</span>
											<span className="font-medium">
												{v.bookings} bookings
											</span>
										</div>
										<Progress
											value={Math.min(
												(v.bookings / v.capacity) * 100,
												100
											)}
											className="h-2"
										/>
										<p className="text-xs text-muted-foreground">
											Capacity: {v.capacity} passengers
										</p>
									</div>
								))}
							</div>
						)}
					</CardContent>
				</Card>

				{/* Popular Vehicles */}
				<Card>
					<CardHeader>
						<CardTitle>Most Booked Vehicles</CardTitle>
					</CardHeader>
					<CardContent>
						{isLoading || !stats ? (
							<Skeleton className="h-40 w-full" />
						) : (
							<div className="space-y-4">
								{stats.vehicles.popular.map((v, i) => (
									<div
										key={i}
										className="flex items-center justify-between"
									>
										<div className="flex items-center gap-2">
											<Car className="h-4 w-4 text-muted-foreground" />
											<span className="text-sm">{v.name}</span>
										</div>
										<span className="text-sm font-medium">
											{v.bookings} bookings
										</span>
									</div>
								))}
							</div>
						)}
					</CardContent>
				</Card>
			</div>
		</TabsContent>
	);
};

export default FleetTab;