'use client';

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

export interface RedemptionInstructionsProps {
  info: FulfillmentInfo;
}

export function RedemptionInstructions({ info }: RedemptionInstructionsProps) {
  const t = useT('checkout_modal');
  const { locale } = useLocale();

  const fmt = (iso?: string | null) => (iso ? formatDate(iso, locale) : null);
  const from = fmt(info.validFrom);
  const until = fmt(info.validUntil);

  const hasAny = !!(info.specialInstructions || from || until);

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

      {!hasAny ? (
        <p className="text-text-secondary mt-2 text-sm">{t('redeem_generic')}</p>
      ) : (
        <dl className="mt-3 space-y-2 text-sm">
          {info.specialInstructions && (
            <div className="flex justify-between gap-2">
              <dt className="text-text-secondary shrink-0">{t('redeem_instructions_label')}</dt>
              <dd className="text-text-primary text-end font-medium">{info.specialInstructions}</dd>
            </div>
          )}
          {(from || until) && (
            <div className="flex justify-between gap-2">
              <dt className="text-text-secondary shrink-0">{t('redeem_validity_label')}</dt>
              <dd className="text-text-primary text-end font-medium">{`${from ?? '—'} – ${until ?? '—'}`}</dd>
            </div>
          )}
        </dl>
      )}
    </Card>
  );
}