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

jest.mock('next-intl', () => ({
  useTranslations: () => (key: string) => key,
}));

import ProfileSummary from './ProfileSummary';

function renderSummary(props: Partial<React.ComponentProps<typeof ProfileSummary>> = {}) {
  return render(
    <ThemeProvider>
      <ProfileSummary displayName="سارا احمدی" {...props} />
    </ThemeProvider>,
  );
}

describe('<ProfileSummary/> component', () => {
  it('renders the display name, phone, and role label', () => {
    renderSummary({ phone: '0912*****33', roleLabel: 'پرستار' });
    expect(screen.getByText('سارا احمدی')).toBeInTheDocument();
    expect(screen.getByText('0912*****33')).toBeInTheDocument();
    expect(screen.getByText('پرستار')).toBeInTheDocument();
  });

  it('renders a TrustBadge only when trustState is set', () => {
    const { rerender } = renderSummary();
    expect(screen.queryByText('badge_verified')).not.toBeInTheDocument();
    rerender(
      <ThemeProvider>
        <ProfileSummary displayName="سارا احمدی" trustState="verified" />
      </ThemeProvider>,
    );
    expect(screen.getByText('badge_verified')).toBeInTheDocument();
  });

  it('renders skeleton placeholders instead of text while loading', () => {
    const { container } = renderSummary({ loading: true, phone: '0912*****33' });
    expect(screen.queryByText('سارا احمدی')).not.toBeInTheDocument();
    expect(container.querySelectorAll('.MuiSkeleton-root').length).toBeGreaterThan(0);
  });

  it('renders the compact horizontal chip variant', () => {
    const { container } = renderSummary({ compact: true, roleLabel: 'مالی' });
    expect(screen.getByText('سارا احمدی')).toBeInTheDocument();
    expect(screen.getByText('مالی')).toBeInTheDocument();
    expect(container.querySelector('.MuiAvatar-root')).toHaveStyle({ width: '32px', height: '32px' });
  });
});
