import { ArrowRight } from 'lucide-react';
import { Box } from '@/ui/Box';
import { Button } from '@/ui/Button';
import { Card } from '@/ui/Card';
import { Grid } from '@/ui/Grid';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { LeagueLogo } from './LeagueLogo';
import { Link } from '@/ui/Link';
import { Stack } from '@/ui/Stack';
import { Surface } from '@/ui/Surface';
import { Text } from '@/ui/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}>
          <LeagueLogo leagueId={id} alt={name} size={56} />
          <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>
  );
}