import { ReactNode } from "react";
import TopNav from "@/components/TopNav";
import { useTheme } from "@/hooks/useTheme";

export default function AppShell({ children }: { children: ReactNode }) {
  const { isDark } = useTheme();

  return (
    <div className={["min-h-dvh", isDark ? "bg-zinc-950 text-zinc-50" : "bg-zinc-100 text-zinc-900"].join(" ")}>
      <TopNav />
      <main className="mx-auto w-full max-w-7xl px-4 py-4 md:px-6 md:py-6">
        {children}
      </main>
      <footer
        className={[
          "border-t px-4 py-4 text-center text-xs md:px-6",
          isDark ? "border-zinc-800 text-zinc-400" : "border-zinc-300 text-zinc-600",
        ].join(" ")}
      >
        Copyright 2026 - IPCam Dashboard -{" "}
        <a
          href="https://ttaisolutions.com/"
          target="_blank"
          rel="noreferrer"
          className={["font-medium transition hover:underline", isDark ? "text-zinc-200" : "text-zinc-900"].join(" ")}
        >
          TTAI Solutions Software
        </a>
      </footer>
    </div>
  );
}