import React from "react";
import { twMerge } from "tailwind-merge";
import style from "../../../style";
import clsx from "clsx";

export interface RadioProps
  extends React.InputHTMLAttributes<HTMLInputElement> {
  /**
   * Input Ref .
   */
  ref?: React.Ref<HTMLInputElement>;
  /**
   * Button variation that will switch between styles for the Checkbox .
   */
  variation?: "initial" | "default" | "primary" | "secondary";
}

const Radio: React.FC<RadioProps> = React.forwardRef((props, ref) => {
  const { className, variation, disabled } = props;

  const initialCss = style.radio.init;

  const disabledCss = disabled ? " opacity-70 cursor-not-allowed " : "";

  const variationClasses = clsx({
    [style.checkbox.default]: variation === "default",
    [style.checkbox.primary]: variation === "primary",
    [style.checkbox.secondary]: variation === "secondary",
  });

  const classesMerged = `${initialCss} ${variationClasses} ${
    className ? className : ""
  } ${disabledCss} `;

  return (
    <input
      type="radio"
      {...props}
      ref={ref}
      className={`${twMerge(classesMerged)}`}
    />
  );
});

Radio.displayName = "Radio";

Radio.defaultProps = {
  variation: "initial",
};

export default Radio;
