'use client';

import React, { useState } from 'react';
import PrimaryButton from '@/components/button/PrimaryButton';
import { Plus } from 'lucide-react';
import FleetList from './FleetList';
import FleetForm from './FleetForm';

export default function FleetsPage() {
	const [isOpen, setIsOpen] = useState(false);
	const [editingVehicle, setEditingVehicle] = useState(null);

	const handleOpenForm = (vehicle: any) => {
		setEditingVehicle(vehicle);
		setIsOpen(true);
	};

	return (
		<main className="flex-1 p-6 md:p-8">
			<div className="space-y-8 flex md:flex-row flex-col items-center justify-between ">
				<div>
					<h1 className="text-4xl font-bold text-foreground">Our Fleet</h1>
					<p className="text-muted-foreground mt-2">
						Explore our premium selection of luxury vehicles for your
						perfect journey
					</p>
				</div>
				<PrimaryButton
					title="Add New Fleet"
					className="md:w-40 md:h-10 text-center justify-center w-full h-12"
					startIcon={<Plus size={16} />}
					onClick={() => setIsOpen(!isOpen)}
				/>
			</div>
			<div className="mt-8">
				<FleetList setEditingVehicle={handleOpenForm} />
			</div>
			<FleetForm
				isOpen={isOpen}
				isEditing={!!editingVehicle}
				vehicle={editingVehicle}
				onClose={() => {
					setIsOpen(false);
					setEditingVehicle(null);
				}}
			/>
		</main>
	);
}