"use client";

import { usePageHeader } from "@/presentation/hooks/use-page-header";
import { useT } from "@/shared/i18n/client";
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/presentation/components/ui/tabs";
import { OrdersTab } from "@/presentation/components/telematics/orders-tab";
import { CatalogTab } from "@/presentation/components/telematics/catalog-tab";

export default function TelematicsPage() {
  const t = useT();
  usePageHeader(t.pages.telematics.title, t.pages.telematics.subtitle);

  return (
    <div className="p-6">
      <Tabs defaultValue="orders" className="space-y-6">
        <TabsList>
          <TabsTrigger value="orders">{t.telematics.tabs.orders}</TabsTrigger>
          <TabsTrigger value="catalog">{t.telematics.tabs.catalog}</TabsTrigger>
        </TabsList>
        <TabsContent value="orders">
          <OrdersTab />
        </TabsContent>
        <TabsContent value="catalog">
          <CatalogTab />
        </TabsContent>
      </Tabs>
    </div>
  );
}