import React from 'react';

import {TimelineStepStyle as S} from './styles/timeline-step.style';
import {DotLineComponent as DotLine} from '../../molecules/dot-line';
import {getVariantHof} from './utils/timeline-step-variant';
import {generateSubtitle} from './utils/timeline-step-subtitle';
import type {
    ITimelineStep,
    ITimelineStepItem,
    TimelineGetVariantType,
} from './timeline-step.type';

export const TimelineStepComponent = <T extends string>({
    steps,
    status,
    hasSubtitle = true,
    startDateTitle = 'StartDate:',
    endDateTitle = 'Deadline:',
}: ITimelineStep<T>): React.ReactNode => {
    const getVariant: TimelineGetVariantType = getVariantHof<T>(steps, status);

    return (
        <S.Container>
            {steps.map((step: ITimelineStepItem<T>, index: number) => {
                const variant = getVariant(index);
                const subtitle = hasSubtitle
                    ? generateSubtitle(step, startDateTitle, endDateTitle)
                    : undefined;
                return (
                    <S.Step key={step.name}>
                        <DotLine
                            variant={variant}
                            title={step.name}
                            subtitle={subtitle}
                        />
                    </S.Step>
                );
            })}
        </S.Container>
    );
};