import { Box, Flex, Loader } from "@mantine/core";
import Header from "./header";
import SwipeableTabs from "@/components/swipeable-tabs";
import { usePlayer, usePlayerMatches, usePlayerStats } from "../../queries";
import TeamList from "@/features/teams/components/team-list";
import StatsOverview, { StatsSkeleton } from "@/components/stats-overview";
import MatchList from "@/features/matches/components/match-list";
import HeaderSkeleton from "./header-skeleton";

const SkeletonLoader = () => (
    <Flex h="30vh" w="100%" align="center" justify="center">
        <Loader />
    </Flex>
)

const ProfileSkeleton = () => {
  const tabs = [
    {
      label: "Overview",
      content: <StatsSkeleton />,
    },
    {
      label: "Matches",
      content: <SkeletonLoader />,
    },
    {
      label: "Teams",
      content: <SkeletonLoader />,
    },
  ];

  return (
    <>
      <HeaderSkeleton />
      <Box mt="lg">
        <SwipeableTabs tabs={tabs} />
      </Box>
    </>
  );
};

export default ProfileSkeleton;