import * as RadixTabs from "@radix-ui/react-tabs";

import { buttonClasses } from "../button/Button.styles";
import { ButtonProps } from "../button/Button";
import { twMerge } from "../../../tailwind.config";

export interface TabTriggerProps extends RadixTabs.TabsTriggerProps {
  /** @default "28" */
  size?: ButtonProps["size"];
}
export const TabTrigger = ({
  size = "28",
  children,
  ...restProps
}: TabTriggerProps) => {
  return (
    <RadixTabs.Trigger
      className={twMerge(
        "relative mb-8 cursor-pointer border-0 outline-none",
        "after:absolute after:-bottom-8 after:left-1/2 after:h-2 after:-translate-x-1/2",
        "after:rounded-t-full after:content-[''] [&[data-state='active']]:after:bg-N700",
        "[&[data-state='active']]:z-10",
        "[&[data-state='inactive']]:text-N100 [&[data-state='inactive']]:hover:text-N700",
        buttonClasses({
          size,
          intent: "tertiary",
          shape: "square",
        }),
        size === "24" && "p-2 after:w-[calc(100%-4px*2)]",
        (size === "32" || size === "28") && "p-4 after:w-[calc(100%-6px*2)]",
        size === "40" && "p-8 after:w-[calc(100%-10px*2)]",
        "only:cursor-default only:after:hidden only:hover:bg-transparent"
      )}
      {...restProps}
    >
      <span className="block p-2">{children}</span>
    </RadixTabs.Trigger>
  );
};
