import { isCompanyUser } from "@/utils/roleStorage";

export const TaleSwitch = ({
  label = "",
  labelPosition = "left",
  checked,
  onChange,
  role,
  parentContainerStyle = { width: 30, height: 15 },
  thumbStyle = { width: 16, height: 16 },
}) => {
  const resolvedRole = role ?? (isCompanyUser() ? "normal" : "business");

  return (
    <div className={`flex gap-3 items-center ${labelPosition === "left" ? "" : "flex-row-reverse"}`}>
      <span>{label}</span>
      <div className="flex items-center gap-2">
        <div
          style={{
            width: parentContainerStyle.width,
            height: parentContainerStyle.height,
          }}
          className={`relative rounded-[30px] cursor-pointer ${
            !checked
              ? "bg-[#ccc]"
              : resolvedRole === "business"
              ? "bg-tale-business"
              : "bg-tale-normal"
          }`}
          onClick={onChange}
        >
          <div
            style={{
              width: thumbStyle.width,
              height: thumbStyle.height,
              position: "absolute",
              left: checked
                ? parentContainerStyle.width - thumbStyle.width + 1
                : 0,
              borderRadius: "50%",
              background: "white",
              boxShadow: "0px 0px 4px rgba(0, 0, 0, 0.25)",
              transition: "left 0.3s ease-in-out",
            }}
            className="top-[51%] -translate-y-[50%]"
          />
        </div>
      </div>
    </div>
  );
};