import { forwardRef } from "react";

/**
 * Tabs
 *
 * center: boolean - center-justify tabs
 */
export const Tabs = forwardRef(function Tabs(
  { center = false, className = "", children, ...props },
  ref
) {
  const classes = [
    "prs-tabs",
    center && "prs-tabs-center",
    className,
  ]
    .filter(Boolean)
    .join(" ");

  return (
    <div ref={ref} role="tablist" className={classes} {...props}>
      {children}
    </div>
  );
});

/**
 * Tab
 *
 * active:   boolean - currently selected tab
 * disabled: boolean
 */
export const Tab = forwardRef(function Tab(
  { active = false, disabled = false, className = "", children, ...props },
  ref
) {
  const classes = [
    "prs-tab",
    active && "prs-tab_active",
    className,
  ]
    .filter(Boolean)
    .join(" ");

  return (
    <button
      ref={ref}
      role="tab"
      className={classes}
      tabIndex={active ? 0 : -1}
      aria-selected={active}
      disabled={disabled}
      {...props}
    >
      {children}
    </button>
  );
});