import React, {FC} from 'react';

import {DotLineStyle as S} from './styles/dot-line.style';
import {DotComponent} from '../../atoms/dot';
import {dotColorMapper, dotVariantMapper} from './mappers/alert-variant-mapper';
import type {IDotLine} from './dot-line.type';

export const DotLineComponent: FC<IDotLine> = ({
    title,
    subtitle,
    variant,
    className,
    size = 'md',
    customColor,
    customDotVariant,
    customLineVariant,
    dotProps,
    dotSize = 'md',
}) => {
    return (
        <S.Container
            variant={customLineVariant || variant}
            size={size}
            className={className}
        >
            <DotComponent
                size={dotSize}
                color={customColor || dotColorMapper[variant || 'normal']}
                variant={
                    customDotVariant || dotVariantMapper[variant || 'normal']
                }
                {...dotProps}
            />
            <S.Title color={customColor}>{title}</S.Title>
            {!!subtitle && <S.Subtitle>{subtitle}</S.Subtitle>}
        </S.Container>
    );
};