import { Button } from '@/ui/Button';
import { Card } from '@/ui/Card';
import { Link } from '@/ui/Link';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/primitives/Stack';

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

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

export function LeagueListItem({ league, isAdmin }: LeagueListItemProps) {
  return (
    <Card
      variant="outline"
      p={4}
      className="bg-graphite-black border-[#262626]"
    >
      <Stack direction="row" align="center" justify="between" fullWidth>
        <Stack 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>
          )}
        </Stack>
        <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>
      </Stack>
    </Card>
  );
}
