'use client';

import { useTranslations } from 'next-intl';
import { useParams } from 'next/navigation';
import { useMinOrderViolations } from '@/lib/store/booking-draft';
import { formatPrice } from '@/lib/utils';

export function MinOrderViolationBanner() {
  const t = useTranslations('cart.min_order');
  const params = useParams<{ locale: string }>();
  const locale = params?.locale ?? 'en';
  const violations = useMinOrderViolations();

  if (violations.length === 0) return null;

  return (
    <div
      id="min-order-banner"
      role="alert"
      aria-live="polite"
      className="mt-4 rounded-md border border-amber-200 bg-amber-50 px-4 py-3 space-y-1.5"
    >
      <p className="text-sm font-semibold text-amber-800">{t('banner_title')}</p>
      {violations.map((v) => (
        <p key={v.public_id} className="text-xs text-amber-700">
          {t('row', {
            amount: formatPrice(v.min_order_status!.shortfall_minor, locale),
            vendor: v.vendor_name,
          })}
        </p>
      ))}
    </div>
  );
}