import React, { ComponentPropsWithRef, forwardRef, ReactNode } from "react";

import { Typography } from "../typography/Typography";
import { twMerge } from "../../../tailwind.config";
import { RadioButtonIcon } from "./RadioButtonIcon";

export interface RadioButtonProps
  extends Omit<ComponentPropsWithRef<"input">, "className"> {
  label?: ReactNode;
  ESCAPE_className?: string;
}

export const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(
  ({ label, ESCAPE_className, ...restProps }, ref) => {
    return (
      <label
        className={twMerge(
          "flex cursor-pointer items-center gap-x-4",
          ESCAPE_className
        )}
      >
        <input type="radio" ref={ref} {...restProps} className="peer sr-only" />

        <RadioButtonIcon />
        {typeof label === "string" ? (
          <Typography size="200">{label}</Typography>
        ) : (
          label
        )}
      </label>
    );
  }
);

RadioButton.displayName = "RadioButton";
