'use client';

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

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

export function LeagueSummaryCard({ league }: LeagueSummaryCardProps) {
  return (
    <Card p={0} style={{ overflow: 'hidden' }}>
      <Box p={4}>
        <Stack direction="row" align="center" gap={4} mb={4}>
          <Box style={{ width: '3.5rem', height: '3.5rem', borderRadius: '0.75rem', overflow: 'hidden', backgroundColor: '#262626', flexShrink: 0 }}>
            <Image src={`/media/league-logo/${league.id}`} alt={league.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' }}>{league.name}</Heading>
          </Box>
        </Stack>

        {league.description && (
          <Text size="sm" color="text-gray-400" block mb={4} style={{ display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>{league.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">{league.settings.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' }}>{league.settings.qualifyingFormat}</Text>
            </Surface>
          </Grid>
        </Box>

        <Box>
          <Link href={`/leagues/${league.id}`} variant="ghost">
            <Button variant="secondary" fullWidth icon={<Icon icon={ArrowRight} size={4} />}>
              View League
            </Button>
          </Link>
        </Box>
      </Box>
    </Card>
  );
}