import { useId } from "react";
import { Label, LabelProps } from "../Label";

type RadioProps = {
  value: string;
  name: string;
  labelText?: string;
};

type Props = Omit<LabelProps & RadioProps, "children">;

const Radio = ({ variant, value, name, labelText, onClick }: Props) => {
  const id = `${name}-${useId()}`;

  return (
    <>
      <input
        id={id}
        type="radio"
        name={name}
        value={value}
        className="d-none"
      />
      <Label variant={variant} onClick={onClick} htmlFor={id}>
        {labelText ? labelText : value}
      </Label>
    </>
  );
};

export { Radio };
