import React, { createContext, useContext } from "react";
import { cn } from "@/lib/utils";

const TabsContext = createContext(null);

export function Tabs({ value, onValueChange, children, className }) {
  return (
    <TabsContext.Provider value={{ value, onValueChange }}>
      <div className={className}>{children}</div>
    </TabsContext.Provider>
  );
}

export function TabsList({ className, ...props }) {
  return (
    <div
      className={cn(
        "inline-flex items-center justify-center rounded-lg bg-slate-100 p-0.5",
        className
      )}
      {...props}
    />
  );
}

export function TabsTrigger({ value, className, children, ...props }) {
  const ctx = useContext(TabsContext);
  const selected = ctx?.value === value;

  return (
    <button
      type="button"
      onClick={() => ctx?.onValueChange && ctx.onValueChange(value)}
      data-state={selected ? "active" : "inactive"}
      className={cn(
        "inline-flex items-center justify-center rounded-md px-3 py-1.5 text-xs font-medium text-slate-600 transition-colors",
        "data-[state=active]:bg-white data-[state=active]:text-slate-900",
        className
      )}
      {...props}
    >
      {children}
    </button>
  );
}