import { Box } from '@/ui/Box';
import { Button } from '@/ui/Button';
import { Link } from '@/ui/Link';
import { Stack } from '@/ui/Stack';
import { Surface } from '@/ui/Surface';
import { Text } from '@/ui/Text';

interface League {
  leagueId: string;
  name: string;
  description: string;
  membershipRole?: string;
}

interface LeagueListItemProps {
  league: League;
  isAdmin?: boolean;
}

export function LeagueListItem({ league, isAdmin }: LeagueListItemProps) {
  return (
    <Surface
      variant="dark"
      rounded="lg"
      border
      padding={4}
      style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderColor: '#262626' }}
    >
      <Box style={{ flex: 1, minWidth: 0 }}>
        <Text weight="medium" color="text-white" block>{league.name}</Text>
        <Text size="xs" color="text-gray-400" block mt={1} style={{ display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
          {league.description}
        </Text>
        {league.membershipRole && (
          <Text size="xs" color="text-gray-500" block mt={1}>
            Your role:{' '}
            <Text color="text-gray-400" style={{ textTransform: 'capitalize' }}>{league.membershipRole}</Text>
          </Text>
        )}
      </Box>
      <Stack direction="row" align="center" gap={2} style={{ marginLeft: '1rem' }}>
        <Link
          href={`/leagues/${league.leagueId}`}
          variant="ghost"
        >
          <Text size="sm" color="text-gray-300">View</Text>
        </Link>
        {isAdmin && (
          <Link href={`/leagues/${league.leagueId}?tab=admin`} variant="ghost">
            <Button variant="primary" size="sm">
              Manage
            </Button>
          </Link>
        )}
      </Stack>
    </Surface>
  );
}