import { formatDate } from 'date-fns';

import { Database } from '@kit/supabase/database';
import { Trans } from '@kit/ui/trans';

export default function OrderDetails({
  order,
}: {
  order: {
    id: string;
    created_at: string | Date;
    location: Pick<
      Database['medreport']['Tables']['connected_online_locations']['Row'],
      'name' | 'address'
    > | null;
    serviceProvider: Pick<
      Database['medreport']['Tables']['connected_online_providers']['Row'],
      'email' | 'phone_number' | 'name'
    > | null;
  };
}) {
  const { id, created_at, location, serviceProvider } = order;

  return (
    <div className="flex flex-col gap-y-2">
      <div>
        <span className="font-bold">
          <Trans i18nKey="cart:orderConfirmed.orderNumber" />:{' '}
        </span>
        <span className="break-all">{id}</span>
      </div>

      <div>
        <span className="font-bold">
          <Trans i18nKey="cart:orderConfirmed.orderDate" />:{' '}
        </span>
        <span>{formatDate(created_at, 'dd.MM.yyyy HH:mm')}</span>
      </div>
      {(location?.name || location?.address) && (
        <div>
          <span className="font-bold">
            <Trans i18nKey="cart:orderConfirmed.location" />:{' '}
          </span>
          <span>
            {location.name || location.address}{' '}
            {location?.name ? location.address : ''}
          </span>
        </div>
      )}

      {serviceProvider && (
        <div className="flex flex-col">
          <span className="font-bold">
            <Trans i18nKey="cart:orderConfirmed.serviceProvider" />:{' '}
          </span>
          <span>{serviceProvider.name}</span>
          <span>{serviceProvider.phone_number}</span>
          <span>{serviceProvider.email}</span>
        </div>
      )}
    </div>
  );
}
