import {styled} from '@mui/material/styles';
import {TypographyComponent} from '../../../atoms';
import {DotLineVariantStyle as variants} from './dot-line-variant.style';
import {DotLineSizeStyle as sizes} from './dot-line-size.style';
import type {IDotLineContainer} from '../dot-line.type';

const Container = styled('div')<IDotLineContainer>`
    display: flex;
    flex-direction: row;
    align-items: center;
    white-space: nowrap;
    ${({variant, theme}) => variants[variant || 'normal'](theme)};
    ${({size}) => sizes[size || 'md']};
`;

const Title = styled(TypographyComponent)`
    color: ${({theme, color}) =>
        !!color ? theme.palette[color || 'primary'][500] : 'inherit'};
    font-weight: 700;
    font-size: inherit;
    margin-inline-start: 0.5rem;
    margin-inline-end: 1rem;
`;

const Subtitle = styled(TypographyComponent)`
    color: inherit;
    font-weight: 500;
    font-size: inherit;
`;

export const DotLineStyle = {
    Container,
    Title,
    Subtitle,
};