import { ArrowRight } from 'lucide-react';
import { Box } from './Box';
import { Button } from './Button';
import { Card } from './Card';
import { Grid } from './Grid';
import { Heading } from './Heading';
import { Icon } from './Icon';
import { Image } from './Image';
import { Link } from './Link';
import { Stack } from './Stack';
import { Surface } from './Surface';
import { Text } from './Text';

interface LeagueSummaryCardProps {
  id: string;
  name: string;
  description?: string;
  maxDrivers: number;
  qualifyingFormat: string;
  href: string;
}

export function LeagueSummaryCard({
  id,
  name,
  description,
  maxDrivers,
  qualifyingFormat,
  href,
}: LeagueSummaryCardProps) {
  return (
    <Card p={0} style={{ overflow: 'hidden' }}>
      <Box p={4}>
        <Stack direction="row" align="center" gap={4} mb={4}>
          <Box
            w="14"
            h="14"
            rounded="lg"
            overflow="hidden"
            bg="bg-deep-graphite"
            flexShrink={0}
          >
            <Image
              src={`/media/league-logo/${id}`}
              alt={name}
              width={56}
              height={56}
              style={{ width: '100%', height: '100%', objectFit: 'cover' }}
            />
          </Box>
          <Box style={{ flex: 1, minWidth: 0 }}>
            <Text
              size="xs"
              color="text-gray-500"
              style={{ textTransform: 'uppercase', letterSpacing: '0.05em' }}
              block
              mb={0.5}
            >
              League
            </Text>
            <Heading level={3} style={{ fontSize: '1rem' }}>
              {name}
            </Heading>
          </Box>
        </Stack>

        {description && (
          <Text
            size="sm"
            color="text-gray-400"
            block
            mb={4}
            lineClamp={2}
            style={{ height: '2.5rem' }}
          >
            {description}
          </Text>
        )}

        <Box mb={4}>
          <Grid cols={2} gap={3}>
            <Surface variant="dark" rounded="lg" padding={3}>
              <Text size="xs" color="text-gray-500" block mb={1}>
                Max Drivers
              </Text>
              <Text weight="medium" color="text-white">
                {maxDrivers}
              </Text>
            </Surface>
            <Surface variant="dark" rounded="lg" padding={3}>
              <Text size="xs" color="text-gray-500" block mb={1}>
                Format
              </Text>
              <Text
                weight="medium"
                color="text-white"
                style={{ textTransform: 'capitalize' }}
              >
                {qualifyingFormat}
              </Text>
            </Surface>
          </Grid>
        </Box>

        <Box>
          <Link href={href}>
            <Button
              variant="secondary"
              fullWidth
              icon={<Icon icon={ArrowRight} size={4} />}
            >
              View League
            </Button>
          </Link>
        </Box>
      </Box>
    </Card>
  );
}