"use client";

import { useMemo, useState } from "react";
import type { Vehicle } from "@/payload-types";
import { VehicleCard } from "@/components/frontend/logistics/VehicleCard";
import { VehicleFilters } from "@/components/frontend/logistics/VehicleFilters";

const categories = ["civilian", "utility", "transport", "weaponized", "military"];

export function VehiclesList({ vehicles }: { vehicles: Vehicle[] }) {
  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);

  const filtered = useMemo(() => {
    if (!selectedCategory) return vehicles;
    return vehicles.filter((v) =>
      v.category?.includes(selectedCategory as NonNullable<Vehicle["category"]>[number]),
    );
  }, [vehicles, selectedCategory]);

  return (
    <>
      <VehicleFilters categories={categories} onFilterChange={setSelectedCategory} />
      {filtered.length > 0 ? (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
          {filtered.map((vehicle) => (
            <VehicleCard key={vehicle.id} vehicle={vehicle as any} />
          ))}
        </div>
      ) : (
        <p className="text-sm text-muted-foreground italic">
          No vehicles match the selected filters.
        </p>
      )}
    </>
  );
}