'use client';

import React from 'react';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Heading } from '@/ui/Heading';
import { Text } from '@/ui/Text';
import { Image } from '@/ui/Image';
import { MembershipStatus } from './MembershipStatus';

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) {
  return (
    <Box as="header" mb={8}>
      <Stack direction="row" align="center" gap={6}>
        <Box 
          position="relative" 
          w="20" 
          h="20" 
          overflow="hidden" 
          border 
          borderColor="white/10" 
          bg="zinc-900" 
          shadow="2xl"
        >
          <Image
            src={`/api/media/league-logo/${leagueId}`}
            alt={`${leagueName} logo`}
            fullWidth
            fullHeight
            objectFit="cover"
          />
        </Box>
        <Stack gap={1}>
          <Stack direction="row" align="center" gap={4}>
            <Heading level={1} fontSize="3xl" weight="bold" color="text-white">
              {leagueName}
              {mainSponsor && (
                <Text ml={3} size="lg" weight="normal" color="text-zinc-500">
                  by{' '}
                  {mainSponsor.websiteUrl ? (
                    <Box
                      as="a"
                      href={mainSponsor.websiteUrl}
                      target="_blank"
                      rel="noreferrer"
                      color="text-blue-500"
                      hoverTextColor="text-blue-400"
                      transition
                    >
                      {mainSponsor.name}
                    </Box>
                  ) : (
                    <Text color="text-blue-500">{mainSponsor.name}</Text>
                  )}
                </Text>
              )}
            </Heading>
            <MembershipStatus leagueId={leagueId} />
          </Stack>
          {description && (
            <Text color="text-zinc-400" size="sm" maxWidth="2xl" block leading="relaxed">
              {description}
            </Text>
          )}
        </Stack>
      </Stack>
    </Box>
  );
}