import React from "react";
import clsx from "clsx";

export type RadioSize = "small" | "medium" | "large";

interface RadioButtonProps {
  name: string;
  value: string | any;
  checked?: boolean;
  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
  label?: string;
  disabled?: boolean;
  isError?: boolean;
  size?: RadioSize;
  className?: string;
}

const sizeMap: Record<RadioSize, string> = {
  small: "w-3 h-3",
  medium: "w-4 h-4",
  large: "w-5 h-5",
};

export const RadioButton: React.FC<RadioButtonProps> = ({
  name,
  value,
  checked = false,
  onChange,
  label,
  disabled = false,
  isError = false,
  size = "medium",
  className,
}) => {
  return (
    <div className={"w-full items-center flex sm:w-auto md:w-auto lg:w-auto"}>
      <label
        className={clsx(
          "inline-flex items-center gap-1 cursor-pointer",
          disabled && "cursor-not-allowed opacity-60",
          className
        )}
      >
        <input
          type="radio"
          name={name}
          value={value}
          checked={checked}
          onChange={onChange}
          disabled={disabled}
          className={clsx(
            "appearance-none rounded-full w-5 h-5 border-2 transition-all duration-150",
            sizeMap[size],
            isError ? "border-red-500" : "border-dark-400",
            checked
              ? "border-transparent bg-primary-600 dark:bg-dark-400 dark:ring-1 ring-gray-300 dark:ring-white"
              : "bg-white dark:bg-dark-600"
          )}
        />
        {label && (
          <span
            className={`text-sm text-gray-700 dark:text-dark-100 select-none`}
          >
            {label}
          </span>
        )}
      </label>
    </div>
  );
};
