"use client";

import { useState } from "react";
import ExploreDirectory from "@/components/explore/ExploreDirectory";
import { Chip } from "@/components/life/Controls";
import { subtypeOf } from "@/lib/api/services";
import { useAirportsStore, useTransportStore } from "@/store/services";

const CATEGORY: Record<string, string> = { airline: "Airline", travel_agency: "Travel agency" };

/** Airports and transport companies on one page; each keeps its own filters and page. */
export default function TransportTabs() {
  const [tab, setTab] = useState<"airport" | "transport">("airport");
  return (
    <>
      <div className="lf-group sv-tools" role="group" aria-label="Directory">
        <Chip pressed={tab === "airport"} onClick={() => setTab("airport")}>
          Airports
        </Chip>
        <Chip pressed={tab === "transport"} onClick={() => setTab("transport")}>
          Transport companies
        </Chip>
      </div>
      {tab === "airport" ? (
        <ExploreDirectory key="airport" useStore={useAirportsStore} kind="airport" noun="airports" base="/services/place" />
      ) : (
        <ExploreDirectory
          key="transport"
          useStore={useTransportStore}
          kind="transport"
          noun="companies"
          base="/services/place"
          tags={(p) => {
            const c = subtypeOf(p as Parameters<typeof subtypeOf>[0]).category;
            return c ? [CATEGORY[c] ?? c] : [];
          }}
        />
      )}
    </>
  );
}