'use client';

import { ReadonlyTimeRange } from '../shared/time-range';
import { type OrderComponentProps } from './types';
import { useOrderQuery } from '@/hooks/api/orders';
import { formatDate } from '@repo/utils/datetime-format';

export function OrderDateTime({ documentId }: Readonly<OrderComponentProps>) {
  const { data: { order } = {}, isLoading } = useOrderQuery({ documentId });

  if (isLoading) {
    return (
      <div className="flex animate-pulse flex-col space-y-1">
        <div className="h-5 w-28 rounded bg-muted" />
        <div className="h-9 w-48 rounded bg-muted" />
      </div>
    );
  }

  if (!order) return null;

  return (
    <div className="flex flex-col">
      <span className="text-sm tracking-wide text-muted-foreground">
        {order.slot?.datetime_start ? formatDate(order.slot.datetime_start).user() : ''}
      </span>
      <ReadonlyTimeRange
        className="text-3xl"
        datetimeEnd={order?.datetime_end}
        datetimeStart={order?.datetime_start}
      />
    </div>
  );
}
