import React, { FunctionComponent, ReactNode, useMemo } from "react";

import "./styles.scss";

interface IRadioProps {
  label?: ReactNode;
  checked?: boolean;
  disabled?: boolean;
  onChange?: (checked: boolean) => void;
  name?: string;
}

export const Radio: FunctionComponent<IRadioProps> = (props) => {
  const { label, checked = false, onChange, disabled, name } = props;

  const radioClasses = `c-radio ${disabled ? "c-radio--disabled" : ""}`;

  const labelLink = useMemo(() => Date.now().toString() + Math.random().toString(), []);

  return (
    <label htmlFor={labelLink} className={radioClasses}>
      {label}
      <input
        type="radio"
        name={name}
        id={labelLink}
        disabled={disabled}
        onChange={({ target }) => onChange?.(target.checked)}
        checked={checked}
        className="c-radio__input"
      />
      <div className="c-radio__checkmark-container">
        <span className="c-radio__checkmark" />
      </div>
    </label>
  );
};
