// @design-system: feedback/TranslationStatusBadge

import { Bot, Globe } from 'lucide-react';
import { useT } from '@/lib/i18n/react';
import { cn } from '@/lib/cn';

/**
 * Variant options for the badge:
 * - 'auto-translated'       — deal was translated by AI/LLM, may have nuances
 * - 'translation-unavailable' — no translation exists for the requested locale
 */
export type TranslationStatusVariant = 'auto-translated' | 'translation-unavailable';

export interface TranslationStatusBadgeProps {
  variant: TranslationStatusVariant;
  /** Current page locale — used for aria-label string selection. */
  locale: string;
  className?: string;
}

/**
 * TranslationStatusBadge — inline notice shown on deal detail pages when
 * the content is auto-translated or the requested translation is unavailable.
 *
 * Renders as `role="note"` so screen readers announce it without treating it
 * as a live region (IS 5568 §4.1.3 / WCAG 2.1 AA).
 *
 * @example
 * ```tsx
 * <TranslationStatusBadge variant="auto-translated" locale="en" />
 * ```
 */
export function TranslationStatusBadge({ variant, className }: TranslationStatusBadgeProps) {
  const t = useT('translations');

  const isAuto = variant === 'auto-translated';
  const label = isAuto ? t('badge_auto_translated') : t('badge_translation_unavailable');
  const note = isAuto ? t('badge_auto_translated_note') : t('badge_translation_unavailable_note');

  return (
    <aside
      role="note"
      aria-label={label}
      className={cn(
        'flex items-start gap-2 rounded-lg border px-3 py-2 text-sm',
        isAuto
          ? 'border-amber-200 bg-amber-50 text-amber-800'
          : 'border-border-default bg-surface-inset text-text-muted',
        className,
      )}
    >
      <span aria-hidden="true" className="mt-0.5 shrink-0">
        {isAuto ? (
          <Bot width={16} height={16} aria-hidden="true" />
        ) : (
          <Globe width={16} height={16} aria-hidden="true" />
        )}
      </span>
      <span>
        <strong className="font-medium">{label}. </strong>
        {note}
      </span>
    </aside>
  );
}