'use client';

import React, {FC} from 'react';
import {RadioStyle as S} from './styles/radio.style';
import {IRadio} from './radio.type';
import {radioSizeMapper} from './mappers/radio-size-mapper';

export const RadioComponent: FC<IRadio> = ({size, ...restProps}) => {
    const {
        checked,
        disabled,
        title,
        id,
        hint,
        color = 'primary',
        hoverable = true,
    } = restProps;

    const classes = {
        isChecked: checked ? 'checked' : '',
        isDisabled: disabled ? 'disabled' : '',
    };

    return (
        <S.Container htmlFor={id}>
            <S.RadioFrame
                className={`${classes.isChecked} ${classes.isDisabled}`}
                size={radioSizeMapper[size || 'md']}
                color={color}
                hoverable={hoverable}
            >
                {checked && <S.CheckedCircle className='checked-circle' />}
                <S.Radio {...restProps} type='radio' />
            </S.RadioFrame>
            {title || hint ? (
                <S.Content>
                    {title && <S.Title>{title}</S.Title>}
                    {hint && <S.Description>{hint}</S.Description>}
                </S.Content>
            ) : null}
        </S.Container>
    );
};