"use client";
import { motion } from "framer-motion";
import Link from "next/link";
import { ArrowLeft } from "lucide-react";
import Footer from "./Footer"; // Assuming you moved it to a component
import { PageLayoutProps } from "@/types/index";

export default function PageLayout({
  children,
  backLink,
  backLabel = "BACK TO DASHBOARD",
  maxWidth = "5xl",
}: PageLayoutProps) {
  const widthClass = {
    "5xl": "max-w-5xl",
    "6xl": "max-w-6xl",
    "7xl": "max-w-7xl",
  }[maxWidth];

  return (
    <main className="min-h-screen bg-[#0a0a0a] text-white pt-6 md:pt-12 lg:pt-24 px-6 md:px-12 lg:px-24 pb-8 flex flex-col">
      <div className={`${widthClass} mx-auto w-full flex-grow flex flex-col`}>
        <div className="flex-grow">
          {backLink && (
            <Link
              href={backLink}
              className="group flex items-center gap-2 text-neutral-500 hover:text-white transition-colors mb-12 font-mono text-[10px] uppercase tracking-widest w-fit"
            >
              <ArrowLeft
                size={12}
                className="transition-transform group-hover:-translate-x-1"
              />
              {backLabel}
            </Link>
          )}

          <motion.div
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.4 }}
          >
            {children}
          </motion.div>
        </div>

        <Footer />
      </div>
    </main>
  );
}