import { getMediaUrl } from '@/lib/utilities/media';
import { Image } from '@/ui/Image';
import { TableCell, TableRow } from '@/ui/Table';
import { Text } from '@/ui/Text';
import { RankMedal } from './RankMedal';
import React from 'react';

interface TeamRankingRowProps {
  id: string;
  rank: number;
  name: string;
  logoUrl?: string;
  rating: number;
  wins: number;
  races: number;
  memberCount: number;
  onClick?: () => void;
}

export function TeamRankingRow({
  id,
  rank,
  name,
  logoUrl,
  rating,
  wins,
  races,
  memberCount,
  onClick,
}: TeamRankingRowProps) {
  return (
    <TableRow
      clickable={!!onClick}
      onClick={onClick}
    >
      <TableCell>
        <div style={{ width: '2rem', display: 'flex', justifyContent: 'center' }}>
          <RankMedal rank={rank} size="md" />
        </div>
      </TableCell>

      <TableCell>
        <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
          <div style={{ 
            position: 'relative', 
            width: '2.5rem', 
            height: '2.5rem', 
            borderRadius: '0.5rem', 
            overflow: 'hidden', 
            border: '1px solid var(--ui-color-border-default)',
            backgroundColor: 'var(--ui-color-bg-surface-muted)'
          }}>
            <Image 
              src={logoUrl || getMediaUrl('team-logo', id)} 
              alt={name} 
              width={40} 
              height={40} 
              objectFit="cover" 
            />
          </div>
          <div style={{ minWidth: 0 }}>
            <Text 
              weight="semibold" 
              variant="high" 
              block 
              truncate
            >
              {name}
            </Text>
            <Text size="xs" variant="low" block>
              {memberCount} Members
            </Text>
          </div>
        </div>
      </TableCell>

      <TableCell textAlign="center">
        <Text font="mono" weight="bold" variant="primary">
          {rating}
        </Text>
      </TableCell>

      <TableCell textAlign="center">
        <Text font="mono" weight="bold" variant="success">
          {wins}
        </Text>
      </TableCell>

      <TableCell textAlign="center">
        <Text variant="low" font="mono">{races}</Text>
      </TableCell>
    </TableRow>
  );
}
