import React from "react";
import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
import type { ReactNode } from "react";
import { twJoin } from "tailwind-merge";

import { Icon, type IconProps } from "../icon/Icon";
import { Typography } from "../typography/Typography";
import { ButtonSize } from "../button/types";

export type MultipleButtonToggleItemProps = {
  value: string;
  size?: Omit<ButtonSize, "default" | "tiny">;
} & (
  | {
      children: ReactNode;
      icon?: undefined;
      "aria-label"?: undefined;
    }
  | {
      icon: IconProps["name"];
      "aria-label": string;
      children?: undefined;
    }
);

const MultipleButtonToggle = ({
  size,
  icon,
  children,
  "aria-label": ariaLabel,
  value,
}: MultipleButtonToggleItemProps) => {
  const child =
    icon !== undefined ? (
      <Icon
        name={icon}
        size={size === "large" ? "24" : "20"}
        weight="semibold"
      />
    ) : (
      <Typography size={size === "large" ? "200" : "100"} weight="medium">
        {children}
      </Typography>
    );

  return (
    <ToggleGroupPrimitive.Item
      className={twJoin(
        "text-style-M200 flex cursor-pointer items-center justify-center rounded-4 border-0 bg-transparent text-N100",
        size === "large" ? "h-28 px-8 py-2" : "h-24 px-8 py-4",
        "hover:bg-N20A",
        "[&[data-state='on']]:bg-N0 [&[data-state='on']]:text-N700 [&[data-state='on']]:shadow-S100"
      )}
      value={value}
      aria-label={ariaLabel}
    >
      {child}
    </ToggleGroupPrimitive.Item>
  );
};

export default MultipleButtonToggle;
