import type { FC } from "react";
import { formatTime } from "@/shared/utils/datetime/index.js";
import "./TimeGroup.scss";

export interface TimeGroupProps {
  /** Scheduled time (ISO 8601 string) */
  scheduled: string;
  /** Actual time (ISO 8601 string), if available */
  actual?: string | undefined;
  /** Day change offset (e.g. +1, -1) */
  dayChange?: number | undefined;
  /** Label for the time group, e.g. "Departure" */
  label?: string;
}

/**
 * Displays scheduled + actual times with a day-change indicator.
 *
 * If actual differs from scheduled, scheduled is shown with strikethrough
 * and actual is shown in bold.
 */
export const TimeGroup: FC<TimeGroupProps> = ({
  scheduled,
  actual,
  dayChange,
  label,
}) => {
  const scheduledTime = formatTime(scheduled);
  const actualTime = actual ? formatTime(actual) : undefined;
  const hasDelay = actualTime !== undefined && actualTime !== scheduledTime;

  return (
    <div className="time-group">
      {label ? <span className="time-group__label">{label}</span> : null}
      <div className="time-group__times">
        {hasDelay ? (
          <>
            <span className="time-group__scheduled time-group__scheduled--delayed">
              {scheduledTime}
            </span>
            <span className="time-group__actual">{actualTime}</span>
          </>
        ) : (
          <span className="time-group__scheduled">{scheduledTime}</span>
        )}
        {dayChange !== undefined && dayChange !== 0 ? (
          <span className="time-group__day-change">
            {dayChange > 0 ? `+${dayChange}` : dayChange}
          </span>
        ) : null}
      </div>
    </div>
  );
};
