import React from "react";
const Ctx = React.createContext();
export function Tabs({ defaultValue, children }){
  const [val, setVal] = React.useState(defaultValue);
  return <Ctx.Provider value={{val,setVal}}>{children}</Ctx.Provider>;
}
export function TabsList({ className="", ...props }){ return <div className={`inline-flex gap-2 ${className}`} {...props} /> }
export function TabsTrigger({ value, children, className="" }){
  const { val, setVal } = React.useContext(Ctx);
  const active = val===value;
  return <button className={`px-3 py-1.5 rounded-xl border ${active?"bg-white":"bg-white/60"} ${className}`} onClick={()=>setVal(value)}>{children}</button>;
}
export function TabsContent({ value, children, className="" }){
  const { val } = React.useContext(Ctx);
  if (val!==value) return null;
  return <div className={className}>{children}</div>;
}