import React, {FC} from 'react';

import {SwitchStyle as S} from './styles/switch.style';
import {ISwitch} from './switch.type';

/**
 *
 * @author Ali M. Sadeghi
 * @version 0.0.1
 */
export const SwitchComponent: FC<ISwitch> = ({
    color,
    disabled,
    checked,
    size,
    title,
    hint,
    ...restProps
}) => {
    return (
        <S.Container>
            <S.CustomSwitch
                data-testid='switch'
                checked={checked}
                disabled={disabled}
                scheme={color}
                size={size}
                disableRipple
                {...restProps}
            />
            {(hint || title) && (
                <S.Content className='content'>
                    {title && <S.Title className='title'>{title}</S.Title>}
                    {hint && <S.Hint className='hint'>{hint}</S.Hint>}
                </S.Content>
            )}
        </S.Container>
    );
};