import { render, screen } from '@testing-library/react';
import { ThemeProvider } from '../../theme';

// next-intl echoes keys so we assert on the label key each state maps to.
jest.mock('next-intl', () => ({
  useTranslations: () => (key: string) => key,
}));

import TrustBadge from './TrustBadge';
import type { BadgeState } from '@/services/verification/types';

function renderBadge(state: BadgeState) {
  return render(
    <ThemeProvider>
      <TrustBadge state={state} />
    </ThemeProvider>,
  );
}

describe('<TrustBadge/> component', () => {
  it('renders the verified label + a data attribute for the verified state', () => {
    const { container } = renderBadge('verified');
    expect(screen.getByText('badge_verified')).toBeInTheDocument();
    expect(container.querySelector('[data-badge-state="verified"]')).toBeInTheDocument();
  });

  it('renders the unverified state distinctly (neutral, not alarming)', () => {
    const { container } = renderBadge('unverified');
    expect(screen.getByText('badge_unverified')).toBeInTheDocument();
    expect(container.querySelector('[data-badge-state="unverified"]')).toBeInTheDocument();
  });

  it('renders expired as its own state, distinct from unverified', () => {
    const { container } = renderBadge('expired');
    expect(screen.getByText('badge_expired')).toBeInTheDocument();
    expect(container.querySelector('[data-badge-state="expired"]')).toBeInTheDocument();
  });
});
