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

type TimeRangeProps = {
  readonly className?: string;
  readonly timeEnd: null | string | undefined;
  readonly timeStart: null | string | undefined;
};

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