import React, {FC} from 'react';

import {TooltipStyle as S} from './tooltip.style';
import {ITooltip} from './tooltip.type';

export const TooltipComponent: FC<ITooltip> = ({
    title,
    description,
    children,
    contentClassName,
    ...restProps
}) => {
    return (
        <S.Tooltip
            {...restProps}
            title={
                <S.Content className={contentClassName}>
                    <S.Title>{title}</S.Title>
                    {description && (
                        <S.Description>{description}</S.Description>
                    )}
                </S.Content>
            }
        >
            <S.Container>{children}</S.Container>
        </S.Tooltip>
    );
};