import React from 'react';
import { MembershipStatus } from './MembershipStatus';
import { getMediaUrl } from '@/lib/utilities/media';
import { Text } from '@/ui/Text';
import { Box } from '@/ui/Box';
import { LeagueHeader as UiLeagueHeader } from '@/ui/LeagueHeader';

// Main sponsor info for "by XYZ" display
interface MainSponsorInfo {
  name: string;
  logoUrl?: string;
  websiteUrl?: string;
}

export interface LeagueHeaderProps {
  leagueId: string;
  leagueName: string;
  description?: string | null;
  ownerId: string;
  ownerName: string;
  mainSponsor?: MainSponsorInfo | null;
}

export function LeagueHeader({
  leagueId,
  leagueName,
  description,
  mainSponsor,
}: LeagueHeaderProps) {
  const logoUrl = getMediaUrl('league-logo', leagueId);

  return (
    <UiLeagueHeader
      name={leagueName}
      description={description}
      logoUrl={logoUrl}
      statusContent={<MembershipStatus leagueId={leagueId} />}
      sponsorContent={
        mainSponsor ? (
          mainSponsor.websiteUrl ? (
            <Box
              as="a"
              href={mainSponsor.websiteUrl}
              target="_blank"
              rel="noreferrer"
              color="text-primary-blue"
              hoverTextColor="text-primary-blue/80"
              transition
            >
              {mainSponsor.name}
            </Box>
          ) : (
            <Text color="text-primary-blue">{mainSponsor.name}</Text>
          )
        ) : undefined
      }
    />
  );
}