import { Box, Flex, Loader } from "@mantine/core";
import SwipeableTabs from "@/components/swipeable-tabs";
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: <SkeletonLoader />,
    },
    {
      label: "Matches",
      content: <SkeletonLoader />,
    },
    {
      label: "Teams",
      content: <SkeletonLoader />,
    },
  ];

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

export default ProfileSkeleton;
