"use client";

import { createContext, useContext, useState, type ReactNode } from "react";

import { Tabs } from "@/components/ui/tabs";

const BossSelectionContext = createContext<{
  position: string;
  onPositionChange: (position: string) => void;
} | null>(null);

export function StygianNavigation({ children }: { children: ReactNode }) {
  const [position, onPositionChange] = useState("0");

  return (
    <BossSelectionContext value={{ position, onPositionChange }}>
      <Tabs defaultValue="105" className="grid grid-cols-1">
        {children}
      </Tabs>
    </BossSelectionContext>
  );
}

export function StygianBossTabs({ children }: { children: ReactNode }) {
  const selection = useContext(BossSelectionContext);
  if (!selection) throw new Error("StygianBossTabs requires StygianNavigation.");

  return (
    <Tabs
      value={selection.position}
      onValueChange={selection.onPositionChange}
      className="row-span-3 grid grid-rows-subgrid"
    >
      {children}
    </Tabs>
  );
}