import { isNormalUser } from "@/utils/roleStorage";
import { TaleText } from "@components/TaleText";

export const TaleCheckbox = ({
  height = 32,
  width = 32,
  className = "",
  role, // normal | business
  checked = false,
  children,
  textClassName = "",
  label = "",
  containerClassName = "",
  ...props
}) => {
  const resolvedRole = role ?? (isNormalUser() ? "normal" : "business");

  return (
    <div className={`flex !gap-2 cursor-pointer text-left items-center w-fit ${containerClassName ?? ''}`} style={{maxWidth: '100%'}} {...props}>
      <div
        style={{
          width: !children ? width : undefined,
          height: !children ? height : undefined,
        }}
        className={`flex items-center justify-center transition-all duration-150 ${
          checked
            ? resolvedRole === "normal"
              ? "bg-tale-normal border-transparent"
              : "bg-tale-business border-transparent"
            : "border-[#CCCCCC] border-2 bg-transparent"
        } rounded-lg ${className}`}
      >
        {children ??
          (checked ? (
            <svg
              width={width - 10}
              height={height - 15}
              viewBox="0 0 20 15"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M6.66661 11.6339L2.81106 7.77835C2.6033 7.5706 2.32153 7.45388 2.02772 7.45388C1.73392 7.45388 1.45214 7.5706 1.24439 7.77835C1.03664 7.9861 0.919922 8.26788 0.919922 8.56169C0.919922 8.70716 0.948576 8.85122 1.00425 8.98562C1.05992 9.12003 1.14152 9.24215 1.24439 9.34502L5.88883 13.9895C6.32217 14.4228 7.02217 14.4228 7.4555 13.9895L19.2111 2.23391C19.4188 2.02615 19.5355 1.74438 19.5355 1.45057C19.5355 1.15677 19.4188 0.874994 19.2111 0.667241C19.0033 0.459488 18.7215 0.342773 18.4277 0.342773C18.1339 0.342773 17.8521 0.459488 17.6444 0.667241L6.66661 11.6339Z"
                fill="white"
              />
            </svg>
          ) : null)}
      </div>
      {!label ? null : typeof label === "string" ? (
        <TaleText
          className={`transition-all text-sm ${
            !checked ? "font-medium" : "!font-semibold"
          } ${textClassName ?? ""}`}
          applyEffect={checked}
          role={resolvedRole}
        >
          <div className={textClassName}>{label}</div>
        </TaleText>
      ) : (
        label
      )}
    </div>
  );
};