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

jest.mock('next-intl', () => ({
  useTranslations: () => (key: string) => {
    const NAMES: Record<string, string> = {
      provider_digipay: 'Digipay',
      provider_snapppay: 'SnappPay',
    };
    return NAMES[key] ?? key;
  },
}));

import BnplProviderLogo from './BnplProviderLogo';

describe('<BnplProviderLogo/> component', () => {
  it('falls back to a tinted monogram roundel when no bundled asset exists', () => {
    const { container } = render(
      <ThemeProvider>
        <BnplProviderLogo providerCode="digipay" />
      </ThemeProvider>,
    );
    const mark = container.querySelector('[data-provider-logo="digipay"]');
    expect(mark).toBeInTheDocument();
    expect(mark).toHaveTextContent('D');
  });

  it('derives the monogram from the translated provider name', () => {
    const { container } = render(
      <ThemeProvider>
        <BnplProviderLogo providerCode="snapppay" />
      </ThemeProvider>,
    );
    expect(container.querySelector('[data-provider-logo="snapppay"]')).toHaveTextContent('S');
  });

  it('sizes the mark from the size prop', () => {
    const { container } = render(
      <ThemeProvider>
        <BnplProviderLogo providerCode="digipay" size={60} />
      </ThemeProvider>,
    );
    const mark = container.querySelector('[data-provider-logo="digipay"]') as HTMLElement;
    expect(mark.style.width).toBe('60px');
    expect(mark.style.height).toBe('42px');
  });
});
