import { Box, Heading, HStack, VStack, Image, Text, useColorModeValue } from '@chakra-ui/react';
import { useQuery } from '@tanstack/react-query';
import { getPlayers, Player } from '../../services/players';
import { assetUrl } from '../../utils/url';
 

const TeamScroller: React.FC = () => {
  const { data } = useQuery<Player[]>({ queryKey: ['players'], queryFn: () => getPlayers() });
  const players = (data || []).filter(p => p.is_active);
  if (!players.length) return null;

  return (
    <Box>
      <Heading size="lg" mb={4} textAlign="center">Náš tým</Heading>
      <HStack spacing={6} overflowX="auto" py={2} className="hide-scrollbar">
        {players.map((p: Player) => (
          <VStack key={p.id} minW="160px" spacing={2} bg={useColorModeValue('white', 'gray.800')} borderRadius="xl" p={4} boxShadow="sm" borderWidth="1px" borderColor={useColorModeValue('gray.200', 'gray.700')}>
            <Image src={assetUrl(p.image_url) || '/logo192.png'} alt={p.first_name + ' ' + p.last_name} w="140px" h="140px" objectFit="cover" borderRadius="lg" fallbackSrc="/dist/img/logo-club-empty.svg" />
            <Text fontWeight="bold" textAlign="center">{p.first_name} {p.last_name}</Text>
            <Text fontSize="sm" color={useColorModeValue('gray.600', 'gray.400')}>{p.position}</Text>
            {null}
          </VStack>
        ))}
      </HStack>
    </Box>
  );
};

export default TeamScroller;