Spanglish/frontend/src/app/(public)/book/[eventId]/_steps/PendingApprovalStep.tsx

import Link from 'next/link';
import Card from '@/components/ui/Card';
import Button from '@/components/ui/Button';
import { ClockIcon, TicketIcon } from '@heroicons/react/24/outline';
import { Event } from '@/lib/api';
import type { BookingResult } from '../_types';

interface PendingApprovalStepProps {
  bookingResult: BookingResult;
  event: Event | null;
  locale: string;
  t: (key: string) => string;
  formatDate: (dateStr: string) => string;
  fmtTime: (dateStr: string) => string;
}

export function PendingApprovalStep({
  bookingResult,
  event,
  locale,
  t,
  formatDate,
  fmtTime,
}: PendingApprovalStepProps) {
  return (
    <div className="section-padding">
      <div className="container-page max-w-xl">
        <Card className="p-8 text-center">
          <div className="w-16 h-16 rounded-full bg-yellow-100 flex items-center justify-center mx-auto mb-6">
            <ClockIcon className="w-10 h-10 text-yellow-600" />
          </div>

          <h1 className="text-2xl font-bold text-primary-dark mb-2">
            {locale === 'es' ? '¡Pago en Verificación!' : 'Payment Being Verified!'}
          </h1>
          <p className="text-gray-600 mb-6">
            {locale === 'es'
              ? 'Estamos verificando tu pago. Recibirás un email de confirmación una vez aprobado.'
              : 'We are verifying your payment. You will receive a confirmation email once approved.'}
          </p>

          <div className="bg-secondary-gray rounded-lg p-6 mb-6">
            <div className="flex items-center justify-center gap-2 mb-4">
              <TicketIcon className="w-6 h-6 text-primary-yellow" />
              <span className="font-mono text-lg font-bold">{bookingResult.qrCode}</span>
            </div>

            <div className="text-sm text-gray-600 space-y-2">
              <p><strong>{t('booking.success.event')}:</strong> {event?.title}</p>
              <p><strong>{t('booking.success.date')}:</strong> {event && formatDate(event.startDatetime)}</p>
              <p><strong>{t('booking.success.time')}:</strong> {event && fmtTime(event.startDatetime)}</p>
              <p><strong>{t('booking.success.location')}:</strong> {event?.location}</p>
            </div>
          </div>

          <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6">
            <p className="text-yellow-800 text-sm">
              {locale === 'es'
                ? 'La verificación del pago puede tomar hasta 24 horas hábiles. Por favor revisa tu email regularmente.'
                : 'Payment verification may take up to 24 business hours. Please check your email regularly.'}
            </p>
          </div>

          <div className="flex flex-col sm:flex-row gap-3 justify-center">
            <Link href="/events">
              <Button variant="outline">{t('booking.success.browseEvents')}</Button>
            </Link>
            <Link href="/">
              <Button>{t('booking.success.backHome')}</Button>
            </Link>
          </div>
        </Card>
      </div>
    </div>
  );
}