import type { ReactNode } from "react";
import Link from "next/link";
import { ArrowLeft } from "lucide-react";
import { LeaderboardSearch } from "@/components/leaderboard/leaderboard-search";
import { LeaderboardTabs } from "@/components/leaderboard/leaderboard-tabs";
import { SpaceBackground } from "@/components/space-background";
import { ThemeToggle } from "@/components/theme-toggle";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";

type LeaderboardShellProps = {
  active: "xp" | "vc";
  title: string;
  description: string;
  searchQuery: string;
  children: ReactNode;
};

export function LeaderboardShell({
  active,
  title,
  description,
  searchQuery,
  children,
}: LeaderboardShellProps) {
  return (
    <main className="relative min-h-screen overflow-hidden bg-background text-foreground">
      <SpaceBackground />
      <div className="relative mx-auto flex w-full max-w-6xl flex-col gap-6 px-4 py-6 sm:px-6 lg:py-10">
        <nav aria-label="ทางลัด" className="flex items-center justify-between gap-3">
          <Button variant="ghost" asChild>
            <Link href="/">
              <ArrowLeft data-icon="inline-start" />
              กลับหน้าหลัก
            </Link>
          </Button>
          <ThemeToggle />
        </nav>

        <Card>
          <CardHeader>
            <CardTitle>
              <h1 className="text-2xl font-semibold sm:text-3xl">{title}</h1>
            </CardTitle>
            <CardDescription className="max-w-2xl">{description}</CardDescription>
          </CardHeader>
          <CardContent className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
            <LeaderboardTabs active={active} searchQuery={searchQuery} />
            <LeaderboardSearch query={searchQuery} />
          </CardContent>
        </Card>

        {children}
      </div>
    </main>
  );
}