import { useLocale, useTranslations } from 'next-intl';

import { Languages } from 'lucide-react';

import { Text, typographyTones } from '@/components/ui/typography';
import { cn } from '@/lib/utils';

/* ============================================================================
   LANGUAGE NOTICE  —  "some content here isn't (fully) translated" banner.
   ----------------------------------------------------------------------------
   Self-gating: renders only on the English site (locale === 'en'); on any
   other locale it returns null, so it's safe to drop anywhere without an
   extra `locale === 'en' &&` guard at the call site.

   Copy: defaults to common.languageNotice, but each page can override `label`
   and/or `text` with its own (already-localized) string when the situation
   needs a different message.

   Type comes from the typography system (Text variant + tone), so the only
   bespoke classes here are the banner's chrome (accent border + tint).
   ========================================================================== */

interface LanguageNoticeProps {
  /** Bold lead-in before the text. Falls back to common.languageNotice.label. */
  label?: string;
  /** Body copy. Falls back to common.languageNotice.text. */
  text?: string;
  className?: string;
}

const LanguageNotice = ({ label, text, className }: LanguageNoticeProps) => {
  const locale = useLocale();
  const t = useTranslations('common.languageNotice');
  if (locale !== 'en') return null;

  const resolvedLabel = label ?? t('label');
  const resolvedText = text ?? t('text');

  return (
    <aside
      role="note"
      className={cn(
        'flex items-start gap-3 border border-brand-primary/10 border-l-[3px] border-l-mma-yellow bg-mma-yellow/[0.08] px-4 py-3',
        className
      )}
    >
      <Languages aria-hidden className={cn('mt-0.5 h-4 w-4 shrink-0', typographyTones.muted)} />
      <Text variant="bodySmall" tone="muted">
        <span className={cn('font-semibold', typographyTones.strong)}>{resolvedLabel}: </span>
        {resolvedText}
      </Text>
    </aside>
  );
};

export default LanguageNotice;