import { ChevronRight } from 'lucide-react';
import { ReactNode } from 'react';
import { Box } from './Box';
import { Card } from './Card';
import { Image } from './Image';
import { Text } from './Text';

export interface LeagueCardProps {
  children: ReactNode;
  onClick?: () => void;
  coverUrl: string;
  logo?: ReactNode;
  badges?: ReactNode;
}

export const LeagueCard = ({ children, onClick, coverUrl, logo, badges }: LeagueCardProps) => {
  return (
    <Card 
      variant="dark" 
      onClick={onClick} 
      style={{ position: 'relative', cursor: onClick ? 'pointer' : 'default', overflow: 'hidden', height: '100%' }}
    >
      <Box height="8rem" position="relative" style={{ overflow: 'hidden' }}>
        <Image src={coverUrl} alt="Cover" fullWidth fullHeight objectFit="cover" style={{ opacity: 0.6 }} />
        <Box position="absolute" inset={0} style={{ background: 'linear-gradient(to top, var(--ui-color-bg-base), transparent)' }} />
        <Box position="absolute" top={3} left={3} display="flex" gap={2}>
          {badges}
        </Box>
        {logo && (
          <Box position="absolute" left={4} bottom={-6} zIndex={10}>
            {logo}
          </Box>
        )}
      </Box>
      <Box padding={4} paddingTop={8} display="flex" flexDirection="col" fullHeight>
        {children}
      </Box>
    </Card>
  );
};

export interface LeagueCardStatsProps {
  label: string;
  value: string;
  percentage: number;
  intent?: 'primary' | 'success' | 'warning';
}

export const LeagueCardStats = ({ label, value, percentage, intent = 'primary' }: LeagueCardStatsProps) => {
  const intentColors = {
    primary: 'var(--ui-color-intent-primary)',
    success: 'var(--ui-color-intent-success)',
    warning: 'var(--ui-color-intent-warning)',
  };

  return (
    <Box marginBottom={4}>
      <Box display="flex" alignItems="center" justifyContent="between" marginBottom={1.5}>
        <Text size="xs" variant="low" weight="bold" uppercase>{label}</Text>
        <Text size="xs" variant="med" font="mono">{value}</Text>
      </Box>
      <Box height="4px" bg="var(--ui-color-bg-surface-muted)" rounded="full" style={{ overflow: 'hidden' }}>
        <Box height="100%" bg={intentColors[intent]} style={{ width: `${Math.min(percentage, 100)}%` }} />
      </Box>
    </Box>
  );
};

export interface LeagueCardFooterProps {
  children: ReactNode;
}

export const LeagueCardFooter = ({ children }: LeagueCardFooterProps) => (
  <Box marginTop="auto" paddingTop={3} style={{ borderTop: '1px solid var(--ui-color-border-muted)', opacity: 0.5 }} display="flex" alignItems="center" justifyContent="between">
    {children}
    <Box display="flex" alignItems="center" gap={1}>
      <Text size="xs" variant="low" weight="bold" uppercase>VIEW</Text>
      <Icon icon={ChevronRight} size={3} intent="low" />
    </Box>
  </Box>
);
