"use client";

import cx from "classnames";
import React from "react";

const CLASS_ROOT = "radio";

export type RadioSize = "default" | "large";

export interface RadioProps
  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
  /** Html id attribute */
  id: string;
  /** Checked state. */
  isChecked?: boolean;
  /** Disabled state. */
  isDisabled?: boolean;
  /** Invalid state */
  isInvalid?: boolean;
  /** Html name attribute. */
  name: string;
  /** Size of element. */
  size?: RadioSize;
  /** HTML value. Uses id when not set. */
  value?: string;
  className?: string;
}

const defaultProps = {
  size: "default" as RadioSize,
};

const Radio: React.FC<RadioProps> = ({
  id,
  isChecked,
  isDisabled,
  isInvalid,
  name,
  size = defaultProps.size,
  value,
  className,
  ...other
}) => {
  const classes = cx(CLASS_ROOT, className, {
    [`${CLASS_ROOT}--${size}`]: size !== defaultProps.size,
    "is-invalid": isInvalid,
  });

  const inputValue = value || id;

  return (
    <>
      <input
        className={classes}
        type="radio"
        id={id}
        name={name}
        defaultChecked={isChecked}
        disabled={isDisabled}
        value={inputValue}
        {...other}
      />
      <div className={`${CLASS_ROOT}-display`} />
    </>
  );
};

Radio.displayName = "Radio";

export { Radio };