import { cn } from '@repo/ui/lib/utils';
import { formatTime } from '@repo/utils/datetime-format';

type TimeRangeProps = {
  readonly className?: string;
  readonly datetimeEnd: null | string | undefined;
  readonly datetimeStart: null | string | undefined;
};

export function ReadonlyTimeRange({
  className,
  datetimeEnd,
  datetimeStart,
}: Readonly<TimeRangeProps>) {
  return (
    <div className={cn('flex flex-row items-center gap-2 text-lg font-bold', className)}>
      <span className="tracking-wider">
        {datetimeStart ? formatTime(datetimeStart).user() : 'xx:xx'}
      </span>
      {' - '}
      <span className="tracking-wider">
        {datetimeEnd ? formatTime(datetimeEnd).user() : 'xx:xx'}
      </span>
    </div>
  );
}