import { useMediaQuery } from "hooks/useMediaQuery";
import PlayerDisplayRow from "./Row";
import PlayerDisplayCard from "./Card";


const PlayerDisplay = ({
    showCard = false, showCardIfScreenSmall = true, ...props }: props) => {
    const isSmall = useMediaQuery({ maxWidth: "950px" });
    // if (showCard) return <PlayerDisplayCard statsText={props.cardStatsText || props.statsText} {...props} />
    if ((showCardIfScreenSmall && isSmall) || showCard) return <PlayerDisplayCard {...props} statsText={props.cardStatsText || props.statsText}  />
    return <PlayerDisplayRow {...props} />
}


interface props {
    showCard?: boolean,
    showCardIfScreenSmall?: boolean,
    best_legend?: number,
    isLink?: boolean,
    name?: string,
    brawlhalla_id?: number,
    animate?: number;
    index: number;
    // For each of the following tiers below
    // Add the tier name followed by a 0 and repeat for each tier till 5
    // Tin
    // Bronze
    // Silver
    // Gold
    // Platinum
    // Diamond
    tier?: "Tin 0" | "Tin 1" | "Tin 2" | "Tin 3" | "Tin 4" | "Tin 5" | "Bronze 0" | "Bronze 1" | "Bronze 2" | "Bronze 3" | "Bronze 4" | "Bronze 5" | "Silver 0" | "Silver 1" | "Silver 2" | "Silver 3" | "Silver 4" | "Silver 5" | "Gold 0" | "Gold 1" | "Gold 2" | "Gold 3" | "Gold 4" | "Gold 5" | "Platinum 0" | "Platinum 1" | "Platinum 2" | "Platinum 3" | "Platinum 4" | "Platinum 5" | "Diamond",
    rating?: number,
    peak_rating?: number,
    region?: "all" | "eu" | "us-e" | "us-w" | "sea" | "aus" | "brz" | "jpn",
    showRating?: boolean,
    verified?: boolean,
    rank?: number,
    socials?: {
        twitter?: string,
        youtube?: string,
    },
    showLegend?: boolean,
    showRank?: boolean,
    showRegion?: boolean,
    showPlacement?: boolean,
    placement: number,
    cardStatsText?: string,

    statsText?: string,
    teamname?: string,
    brawlhalla_id_one?: number,
    brawlhalla_id_two?: number,
    games?: number,
    wins?: number,
}
export default PlayerDisplay;