import { twJoin } from "tailwind-merge";

import type { IconButtonProps } from "./IconButton";

const toggledStyle = twJoin(
  "bg-B75 bg-opacity-[0.32] text-B400",
  "hover:bg-opacity-[0.64] hover:text-B500"
);

const defaultStyle = twJoin("text-N100", "hover:bg-N20A hover:text-N700");

export function useIconButtonStyles({
  toggled,
}: Pick<IconButtonProps, "toggled">) {
  const classes = {
    root: twJoin(
      "bg-transparent border-0 rounded-6 p-4 inline-flex cursor-pointer outline-none",
      "focus-visible:ring-3 ring-B400FR",
      "disabled:cursor-default disabled:text-N60 disabled:bg-transparent",
      toggled ? toggledStyle : defaultStyle
    ),
  };

  return classes;
}
