import { useParams } from "react-router";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import GeneralTab from "./general";
import MembersTab from "./members";
import GroupsTab from "./groups";
import JoinTab from "./join";

const TABS = [
  { value: "general", label: "General" },
  { value: "members", label: "Members" },
  { value: "groups", label: "Groups" },
  { value: "join", label: "Join" },
] as const;

export default function WorkspaceSettingsPage() {
  const { projectName = "" } = useParams();

  return (
    <div className="mx-auto max-w-4xl px-8 py-12">
      <div className="mb-8">
        <h1 className="text-xl font-bold tracking-tight text-foreground">Settings</h1>
        <p className="mt-1 text-sm text-muted-foreground">
          Manage your workspace configuration and members.
        </p>
      </div>

      <Tabs defaultValue="general">
        <TabsList
          aria-label="Settings sections"
          className="mb-8 h-9 w-fit border-b border-border"
          variant="line"
        >
          {TABS.map(({ value, label }) => (
            <TabsTrigger className="px-3 text-[13px]" key={value} value={value}>
              {label}
            </TabsTrigger>
          ))}
        </TabsList>

        <TabsContent value="general">
          <GeneralTab projectName={projectName} />
        </TabsContent>
        <TabsContent value="members">
          <MembersTab projectName={projectName} />
        </TabsContent>
        <TabsContent value="groups">
          <GroupsTab projectName={projectName} />
        </TabsContent>
        <TabsContent value="join">
          <JoinTab projectName={projectName} />
        </TabsContent>
      </Tabs>
    </div>
  );
}
