import { ReactNode } from 'react';
import { Box } from './Box';
import { Heading } from './Heading';
import { Stack } from './Stack';
import { Text } from './Text';

interface LeagueHeaderProps {
  name: string;
  description?: string | null;
  logoUrl: string;
  sponsorContent?: ReactNode;
  statusContent?: ReactNode;
}

export function LeagueHeader({
  name,
  description,
  logoUrl,
  sponsorContent,
  statusContent,
}: LeagueHeaderProps) {
  return (
    <Box mb={8}>
      <Box display="flex" alignItems="center" justifyContent="between" mb={6}>
        <Stack direction="row" align="center" gap={4}>
          <Box h="16" w="16" rounded="xl" overflow="hidden" border style={{ borderColor: 'rgba(38, 38, 38, 0.8)', backgroundColor: '#1a1d23' }} shadow="lg">
            <img
              src={logoUrl}
              alt={`${name} logo`}
              width={64}
              height={64}
              className="h-full w-full object-cover"
              loading="lazy"
              decoding="async"
            />
          </Box>
          <Box>
            <Box display="flex" alignItems="center" gap={3} mb={1}>
              <Heading level={1}>
                {name}
                {sponsorContent && (
                  <Text color="text-gray-400" weight="normal" size="lg" ml={2}>
                    by {sponsorContent}
                  </Text>
                )}
              </Heading>
              {statusContent}
            </Box>
            {description && (
              <Text color="text-gray-400" size="sm" maxWidth="xl" block>
                {description}
              </Text>
            )}
          </Box>
        </Stack>
      </Box>
    </Box>
  );
}