'use client';

import React, {FC} from 'react';
import {CheckboxStyle as S} from './styles/checkbox.style';
import {ICheckbox} from './checkbox.type';
import {checkboxSizeMapper} from './mappers/checkbox-size-mapper';
import {CheckboxIconComponent} from './parts/icon/checkbox-icon.component';

export const CheckboxComponent: FC<ICheckbox> = ({size, ...restProps}) => {
    const {
        checked,
        disabled,
        indeterminate,
        title,
        hint,
        color = 'primary',
    } = restProps;

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

    return (
        <S.Container {...restProps}>
            <S.CheckboxFrame
                className={`${classes.isChecked} ${classes.isDisabled}`}
                size={checkboxSizeMapper[size || 'md']}
                color={color}
            >
                <CheckboxIconComponent
                    checked={checked}
                    indeterminate={indeterminate}
                />
                <S.Checkbox {...restProps} type='checkbox' />
            </S.CheckboxFrame>
            {title || hint ? (
                <S.Content>
                    {title && <S.Title>{title}</S.Title>}
                    {hint && <S.Description>{hint}</S.Description>}
                </S.Content>
            ) : null}
        </S.Container>
    );
};