'use client';

import { MapPin } from 'lucide-react';
import { Card } from '@/components/ui/layout/Card';
import { useT } from '@/lib/i18n/react';
import type { FulfillmentInfo } from '@/server/domain/fulfillment/mode';

export interface PickupInstructionsProps {
  info: FulfillmentInfo;
}

export function PickupInstructions({ info }: PickupInstructionsProps) {
  const t = useT('checkout_modal');

  const hasAny = !!(
    info.pickupAddress ||
    info.pickupStart ||
    info.pickupEnd ||
    info.specialInstructions
  );
  const hours = [info.pickupStart, info.pickupEnd].filter(Boolean).join('–');

  return (
    <Card padding="md">
      <div className="flex items-center gap-2">
        <MapPin size={16} aria-hidden className="shrink-0" />
        <h3 className="text-text-primary text-sm font-semibold">{t('pickup_title')}</h3>
      </div>

      {!hasAny ? (
        <p className="text-text-secondary mt-2 text-sm">{t('pickup_generic')}</p>
      ) : (
        <dl className="mt-3 space-y-2 text-sm">
          {info.pickupAddress && (
            <div className="flex justify-between gap-2">
              <dt className="text-text-secondary shrink-0">{t('pickup_address_label')}</dt>
              <dd className="text-text-primary text-end font-medium">{info.pickupAddress}</dd>
            </div>
          )}
          {(info.pickupStart || info.pickupEnd) && (
            <div className="flex justify-between gap-2">
              <dt className="text-text-secondary shrink-0">{t('pickup_hours_label')}</dt>
              <dd className="text-text-primary text-end font-medium">{hours}</dd>
            </div>
          )}
          {info.specialInstructions && (
            <p className="text-text-primary">{info.specialInstructions}</p>
          )}
        </dl>
      )}
    </Card>
  );
}