import React from 'react';
import { describe, it, expect, vi } from 'vitest';
import { render, screen } from '@testing-library/react';

vi.mock('@/lib/services/ServiceProvider', () => ({
  useServices: () => ({
    mediaService: {
      getLeagueLogo: () => '/logo.png',
    },
  }),
}));

vi.mock('@/components/leagues/MembershipStatus', () => ({
  __esModule: true,
  default: () => <div data-testid="membership-status" />,
}));

vi.mock('next/image', () => ({
  __esModule: true,
  default: (props: any) => <img {...props} />,
}));

import LeagueHeader from './LeagueHeader';

describe('LeagueHeader', () => {
  it('renders league name, description and sponsor', () => {
    render(
      <LeagueHeader
        leagueId="league-1"
        leagueName="Test League"
        description="A fun test league"
        ownerId="owner-1"
        ownerName="Owner Name"
        mainSponsor={{
          name: 'Test Sponsor',
          websiteUrl: 'https://example.com',
        }}
      />
    );

    expect(screen.getByText('Test League')).toBeInTheDocument();
    expect(screen.getByText('A fun test league')).toBeInTheDocument();
    expect(screen.getByText('by')).toBeInTheDocument();
    expect(screen.getByText('Test Sponsor')).toBeInTheDocument();
  });

  it('renders without description or sponsor', () => {
    render(
      <LeagueHeader
        leagueId="league-2"
        leagueName="League Without Details"
        ownerId="owner-2"
        ownerName="Owner 2"
      />
    );

    expect(screen.getByText('League Without Details')).toBeInTheDocument();
  });
});