import type { JSX } from "solid-js";
import { splitProps } from "solid-js";
import { useTabsContext } from "./tabs-context";

/** Props for a Tab content panel. */
export interface TabsPanelProps extends JSX.HTMLAttributes<HTMLDivElement> {
  value: string;
  children?: JSX.Element;
}

/** Content panel associated with a Tab. Hidden when its tab is not active. */
export function TabsPanel(props: TabsPanelProps): JSX.Element {
  const [local, rest] = splitProps(props, ["value", "children"]);
  const ctx = useTabsContext();

  const isActive = () => ctx.activeTab() === local.value;

  return (
    <div
      role="tabpanel"
      id={`${ctx.baseId}-panel-${local.value}`}
      aria-labelledby={`${ctx.baseId}-tab-${local.value}`}
      data-state={isActive() ? "active" : "inactive"}
      hidden={!isActive() || undefined}
      // biome-ignore lint/a11y/noNoninteractiveTabindex: tabpanel role requires tabIndex per WAI-ARIA spec
      tabIndex={0}
      {...rest}
    >
      {local.children}
    </div>
  );
}
