import { Box } from "@mantine/core";
import { Suspense } from "react";
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 from "@/components/stats-overview";
import MatchList from "@/features/matches/components/match-list";
import BadgeShowcase from "@/features/badges/components/badge-showcase";
import BadgeShowcaseSkeleton from "@/features/badges/components/badge-showcase-skeleton";

interface ProfileProps {
  id: string;
}

const Profile = ({ id }: ProfileProps) => {
  const { data: player } = usePlayer(id);
  const { data: matches } = usePlayerMatches(id);
  const { data: stats, isLoading: statsLoading } = usePlayerStats(id);

  const tabs = [
    {
      label: "Overview",
      content: (
        <>
          <Suspense fallback={<BadgeShowcaseSkeleton />}>
            <BadgeShowcase playerId={id} />
          </Suspense>
          <StatsOverview statsData={stats} isLoading={statsLoading} />
        </>
      ),
    },
    {
      label: "Matches",
      content: <MatchList matches={matches || []} />,
    },
    {
      label: "Teams",
      content: <TeamList teams={player.teams || []} />,
    },
  ];

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

export default Profile;