import { twJoin } from "tailwind-merge";

import { ButtonVariant } from "../button/types";

type StyleProps = {
  variant: ButtonVariant;
};

export function useButtonGroupStyles({ variant }: StyleProps) {
  const classes = {
    root: "rounded-6 shadow-none group",
    grouped: twJoin(
      "-ml-[1px] relative min-w-[unset] border-r-0 rounded-l-0 rounded-r-0",
      "[.group>span:first-child>&]:rounded-l-6 [.group>&:first-child]:rounded-l-6",
      "[.group>span:first-child>&]:ml-0 [.group>&:first-child]:ml-0",
      "[.group>span:last-child>&]:rounded-r-6 [.group>&:last-child]:rounded-r-6",
      "[.group>span:last-child>&]:after:hidden [.group>&:last-child]:after:hidden",
      "after:content-[''] after:w-[1px] after:h-16 after:rounded-full",
      "after:absolute after:z-10 after:top-1/2 after:translate-x-1/2 after:-translate-y-1/2 after:right-0"
    ),
    groupedContainedPrimary: "after:bg-B300",
    groupedContainedSecondary: twJoin(
      variant === "danger" ? "after:bg-R300" : "after:bg-N50"
    ),
  };

  return classes;
}
