import { useMediaQuery } from "hooks/useMediaQuery"
import styles from 'styles/search/TopSearches.module.css'
import Menu from '../Menu'
import { useQuery } from "@tanstack/react-query"
import axios from "axios"
import Link from "next/link"
import { PlayerTracker } from "helper/types"

const TopSearches = () => {
    const isSmall = useMediaQuery({maxWidth: "1380px"})
    const isMobile = useMediaQuery({maxWidth: "415px"})
    const {data:topSearches} = useQuery(["top-searches"], async() => {
    let data = await (await axios.get(`${process.env.DOMAIN}/api/tracker/player/top`)).data
    return data
    }, {
        staleTime: 900000,
        cacheTime: 900000
    })
    return(
        <Menu barTitle='Top Searches'
width={!isSmall ? "80%" : (!isMobile ? "24rem" : "80%")}
        >
            <ul className={styles.list}>
        {topSearches && topSearches?.map((player:PlayerTracker, index:number) => {
            return(
            <Item placement={index + 1} key={`top_${index}`} {...player} />
            )
        })}
            </ul>
        </Menu>
    )
}


const Item = ({name = "Placeholder", placement = 1, brawlhalla_id}:ItemProps) => {
return(
    <li className={styles.item}>
    <Link href={"/player/" + brawlhalla_id} passHref>
    <a>
        <span className={styles.name}> 
        <span>{placement}.</span> {name}
        </span>
        </a>
        </Link>
    </li>
)
}

interface ItemProps {
    name?:string,
    placement?:number,
    brawlhalla_id: number
}
export default TopSearches