import { ArrowRight } from 'lucide-react';
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 { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';

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} overflow="hidden">
      <Stack p={4}>
        <Stack direction="row" align="center" gap={4} mb={4}>
          <LeagueLogo leagueId={id} alt={name} size={56} />
          <Stack flex={1} minWidth="0">
            <Text
              size="xs"
              color="text-gray-500"
              transform="uppercase"
              letterSpacing="0.05em"
              block
              mb={0.5}
            >
              League
            </Text>
            <Heading level={3} fontSize="1rem">
              {name}
            </Heading>
          </Stack>
        </Stack>

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

        <Stack mb={4}>
          <Grid cols={2} gap={3}>
            <Card variant="outline" rounded="lg" p={3} bg="bg-graphite-black">
              <Text size="xs" color="text-gray-500" block mb={1}>
                Max Drivers
              </Text>
              <Text weight="medium" color="text-white">
                {maxDrivers}
              </Text>
            </Card>
            <Card variant="outline" rounded="lg" p={3} bg="bg-graphite-black">
              <Text size="xs" color="text-gray-500" block mb={1}>
                Format
              </Text>
              <Text
                weight="medium"
                color="text-white"
                transform="capitalize"
              >
                {qualifyingFormat}
              </Text>
            </Card>
          </Grid>
        </Stack>

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