"use client";

import * as Tabs from "@radix-ui/react-tabs";
import { LayoutGrid, List, Table2 } from "lucide-react";

import { cn } from "@/lib/utils";
import { type ActiveViewType, useViewStore } from "@/lib/stores/view-store";

const tabs: { id: ActiveViewType; label: string; icon: typeof List }[] = [
  { id: "list", label: "List", icon: List },
  { id: "board", label: "Board", icon: LayoutGrid },
  { id: "table", label: "Table", icon: Table2 },
];

export function ViewSwitcher() {
  const activeView = useViewStore((s) => s.activeView);
  const setActiveView = useViewStore((s) => s.setActiveView);

  const tabValue = tabs.some((t) => t.id === activeView) ? activeView : "list";

  return (
    <Tabs.Root value={tabValue} onValueChange={(v) => setActiveView(v as ActiveViewType)}>
      <Tabs.List
        className="inline-flex h-8 items-stretch gap-1 border-b border-border"
        aria-label="View type"
      >
        {tabs.map(({ id, label, icon: Icon }) => (
          <Tabs.Trigger
            key={id}
            value={id}
            className={cn(
              "relative inline-flex items-center gap-1.5 px-2.5 text-xs font-medium text-muted-foreground transition-colors",
              "hover:text-foreground",
              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
              "data-[state=active]:text-primary",
              "after:pointer-events-none after:absolute after:bottom-0 after:left-1 after:right-1 after:h-0.5 after:rounded-full after:bg-primary after:opacity-0 after:transition-opacity",
              "data-[state=active]:after:opacity-100",
            )}
          >
            <Icon className="size-3.5 shrink-0" aria-hidden />
            <span>{label}</span>
          </Tabs.Trigger>
        ))}
      </Tabs.List>
    </Tabs.Root>
  );
}