import config from "@payload-config";
import { getPayload } from "payload";
import type { Vehicle } from "@/payload-types";
import { TruckIcon } from "lucide-react";
import { VehiclesList } from "./VehiclesList";

export const metadata = {
  title: "Vehicles — Polaris Task Force",
};

export default async function VehiclesPage() {
  const payload = await getPayload({ config });

  const vehiclesRes = await payload.find({
    collection: "vehicles",
    limit: 500,
    depth: 1,
  });

  const vehicles = vehiclesRes.docs as Vehicle[];

  return (
    <div className="p-5 flex flex-col gap-6">
      <div className="flex flex-col gap-1">
        <div className="flex items-center gap-2">
          <TruckIcon className="size-5 text-muted-foreground" />
          <h1 className="text-lg font-semibold">Vehicles</h1>
        </div>
        <p className="text-sm text-muted-foreground">
          Vehicle catalog for deployment and operations.
        </p>
      </div>

      <VehiclesList vehicles={vehicles} />
    </div>
  );
}