'use client';

import { Button } from '@/ui/Button';
import { Link } from '@/ui/Link';
import { Text } from '@/ui/Text';
import { ListItem, ListItemInfo, ListItemActions } from '@/ui/ListItem';
import React from 'react';

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

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

export function LeagueListItem({ league, isAdmin }: LeagueListItemProps) {
  return (
    <ListItem>
      <ListItemInfo
        title={league.name}
        description={league.description}
        meta={
          league.membershipRole && (
            <Text size="xs" variant="low">
              Your role:{' '}
              <Text as="span" variant="med" transform="capitalize">{league.membershipRole}</Text>
            </Text>
          )
        }
      />
      <ListItemActions>
        <Link
          href={`/leagues/${league.leagueId}`}
          variant="ghost"
        >
          <Text size="sm" variant="med">View</Text>
        </Link>
        {isAdmin && (
          <Link href={`/leagues/${league.leagueId}?tab=admin`} variant="ghost">
            <Button variant="primary" size="sm">
              Manage
            </Button>
          </Link>
        )}
      </ListItemActions>
    </ListItem>
  );
}