import React from "react";
import { Dot } from "./Dot";

interface ItemLabel {
    item?: string | null;
    dotColor: "loading" | "unloading" | "stops";
    dotNumber: number;
    stateCode?: string;
}

export const TimerLabel = (props: ItemLabel) => {
    const { item, dotColor, dotNumber, stateCode } = props;
    const displayText = stateCode ? `${item}, ${stateCode}` : item;
    return (
        <div>
            <div className="fr-flex fr-items-center fr-gap-1">
                <Dot number={dotNumber} color={dotColor} />
                <p className="fr-text-sm fr-font-md fr-p-style-override">{displayText}</p>
            </div>
        </div>
    );
};