import { cleanup } from '@testing-library/react';
import { render } from '../../../utils/theme-render-wrapper';

import { ASSETS_URL } from '../../../consts/common';
import { DictionaryCard } from './dictionary-card';
import type { DictionaryCardProps } from './dictionary-card';

afterEach(cleanup);

const mockCard: DictionaryCardProps = {
  classes: {
    root: ''
  },
  title: 'Title',
  items: {
    Hello: 'World',
    Hello1: 'World1',
    Hello2: 'World2'
  }
};

describe('<DictionaryCard />', () => {
  it(`Should render with avatarProps`, () => {
    render(
      <DictionaryCard
        {...mockCard}
        avatarProps={{
          src: 'https://i.pinimg.com/originals/e5/a9/e8/e5a9e877bcacdc5713d2a8f98412762d.png'
        }}
      />
    );
  });

  it(`Should render without avatarProps`, () => {
    render(<DictionaryCard {...mockCard} />);
  });

  it(`Should render with user initials`, () => {
    render(
      <DictionaryCard
        {...mockCard}
        avatarProps={{
          initials: 'JS',
          backgroundColor: '#6BB9D7'
        }}
      />
    );
  });

  it(`Should render as not verified user`, () => {
    render(
      <DictionaryCard
        {...mockCard}
        avatarProps={{
          emailVerified: false
        }}
      />
    );
  });

  it(`Should render with mainIcon and link`, () => {
    render(
      <DictionaryCard
        title="Contact Person"
        mainIcon={{
          src: `${ASSETS_URL}/icons/icon_User.svg`
        }}
        items={{
          Name: 'Jamie Nazareth',
          Role: 'Admin',
          Email: <a href="mailto:jamie.nazareth@fake.com">Contact Person</a>
        }}
      />
    );
  });
});