import { List, ListItem, Skeleton, Text } from "@mantine/core";
import { useNavigate } from "@tanstack/react-router";
import PlayerAvatar from "@/components/player-avatar";
import { Player } from "@/features/players/types";
import { useCallback } from "react";

interface PlayerListProps {
  players: Player[];
  loading?: boolean;
}

const PlayerList = ({ players, loading = false }: PlayerListProps) => {
  const navigate = useNavigate();

  const handleClick = useCallback((playerId: string) => 
    navigate({ to: `/profile/${playerId}`}), [navigate]);
  
  if (loading) return <List>
    {Array.from({ length: 10 }).map((_, i) => (
      <ListItem py='xs' key={`skeleton-${i}`}
        icon={<Skeleton circle height={40} width={40} />}
      >
        <Skeleton height={20} width={200} />
      </ListItem>
    ))}
  </List>

  return <List p="0">
    {players?.map((player) => (
      <ListItem key={player.id}
        py='xs'
        icon={<PlayerAvatar size={40} name={`${player.first_name} ${player.last_name}`} disableFullscreen />}
        style={{ cursor: 'pointer' }}
        onClick={() => handleClick(player.id)}
      >
        <Text fw={500}>{`${player.first_name} ${player.last_name}`}</Text>
      </ListItem>
    ))}
  </List>
}

export default PlayerList;