'use client';

import { type SlotComponentProps } from '../types';
import { useSlotQuery } from '@/hooks/api/slots';
import { formatDate } from '@repo/utils/datetime-format';

export function SlotDate({ documentId }: Readonly<SlotComponentProps>) {
  const { data: { slot } = {} } = useSlotQuery({ documentId });

  if (!slot) return null;

  return (
    <span className="text-sm tracking-wide text-muted-foreground">
      {formatDate(slot?.date).user()}
    </span>
  );
}