import Link from "next/link";
import { ArrowLeft } from "lucide-react";
import { ThemeToggle } from "@/components/theme-toggle";
import { Button } from "@/components/ui/button";

export default function ProfileLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <main className="relative min-h-screen overflow-hidden bg-background text-foreground">
      <div className="relative mx-auto flex w-full max-w-5xl 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>
        {children}
      </div>
    </main>
  );
}