// Copyright: © 2026 TWWIM UG. All rights reserved. (www.twwim.com)

import { Clock, AlertTriangle } from 'lucide-react';
import { useTranslation } from '@/i18n/TranslationProvider';
import { type WaitUrgency, formatWait } from '../lib/waitTime';

interface WaitTimeBadgeProps {
  waitMs: number;
  urgency: WaitUrgency;
  size?: 'sm' | 'md';
}

const STYLES: Record<WaitUrgency, string> = {
  none: 'bg-emerald-50 text-emerald-700 ring-emerald-200',
  warn: 'bg-amber-50 text-amber-700 ring-amber-200',
  breach: 'bg-red-100 text-red-700 ring-red-300 animate-pulse',
};

export function WaitTimeBadge({ waitMs, urgency, size = 'sm' }: WaitTimeBadgeProps) {
  const { locale } = useTranslation();
  if (waitMs === 0) return null;

  const Icon = urgency === 'breach' ? AlertTriangle : Clock;
  const px = size === 'sm' ? 'px-1.5 py-0.5 text-[10px]' : 'px-2 py-1 text-xs';

  return (
    <span
      className={`inline-flex items-center gap-1 rounded-full ring-1 ring-inset font-medium ${STYLES[urgency]} ${px}`}
      data-testid={`wait-badge-${urgency}`}
      title={`Visitor waiting ${formatWait(waitMs, locale)}`}
    >
      <Icon size={size === 'sm' ? 10 : 12} />
      {formatWait(waitMs, locale)}
    </span>
  );
}