import React, { FC } from "react";
import cx from 'classnames';
import { RadioProps } from "./Radio.types";
import "./Radio.scss"
import { v4 as uuidv4 } from 'uuid';
import { useLocale } from "../../hooks/useLocale";
import { Label } from "..";

const Radio: FC<RadioProps> = ({
    label = "test value",
    checked = false,
    isDisabled = false,
    group = "base-radio",
    id=uuidv4(),
    value = "",
    style={},
    className='',
    onClick,
    onChange,
}) => {
    const lang = useLocale(label)
    return (
        <div className="radio-gtc-rc-div">
            <input
                className={cx(isDisabled && "input-gtc-rc-radio-disabled", className)}
                type="radio"
                id={id} 
                name={group}
                value={value}
                checked={checked}
                disabled={isDisabled}
                onClick={onClick}
                onChange={(e) => onChange && onChange(value)}
                style={style}
            />
            {
                label &&
                <Label className={cx("radio-gtc-rc-label", isDisabled && "radio-gtc-rc-disabled")} htmlFor={id}>
                    {lang}
                </Label>
            }
        </div>
    )
}

export default Radio