import React from "react";

export function Tabs({ value, defaultValue, onValueChange, className = "", children, ...props }) {
  const [internal, setInternal] = React.useState(defaultValue);
  const val = value !== undefined ? value : internal;
  const set = (v) => { if (value === undefined) setInternal(v); if (onValueChange) onValueChange(v); };
  const ctx = { value: val, setValue: set };
  return (
    <div className={["o-tabs", className].filter(Boolean).join(" ")} data-slot="tabs" {...props}>
      {React.Children.map(children, (child) => (React.isValidElement(child) ? React.cloneElement(child, { __tabs: ctx }) : child))}
    </div>
  );
}
export function TabsList({ __tabs, variant = "default", size = "default", className = "", children, ...props }) {
  const cls = ["o-tabs__list", "o-tabs__list--" + variant, className].filter(Boolean).join(" ");
  return (
    <div role="tablist" className={cls} data-slot="tabs-list" data-size={size} {...props}>
      {React.Children.map(children, (child) => (React.isValidElement(child) ? React.cloneElement(child, { __tabs, size }) : child))}
    </div>
  );
}
export function TabsTab({ __tabs, value, size = "default", className = "", children, ...props }) {
  const active = __tabs && __tabs.value === value;
  const cls = ["o-tabs__tab", size !== "default" ? "o-tabs__tab--" + size : "", className].filter(Boolean).join(" ");
  return (
    <button type="button" role="tab" aria-selected={Boolean(active)} className={cls} data-slot="tabs-tab" data-active={active ? "" : undefined}
      onClick={() => __tabs && __tabs.setValue(value)} {...props}>{children}</button>
  );
}
export function TabsPanel({ __tabs, value, className = "", children, ...props }) {
  if (!__tabs || __tabs.value !== value) return null;
  return <div role="tabpanel" className={["o-tabs__panel", className].filter(Boolean).join(" ")} data-slot="tabs-panel" {...props}>{children}</div>;
}
