import type { ReactNode } from "react";

import { Leaf } from "lucide-react";
import Link from "next/link";

export default function UserAuthLayout({ children }: { children: ReactNode }) {
  return (
    <div className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-br from-teal-50 via-white to-emerald-50 px-4 py-12">
      <Link href="/" className="mb-8 flex items-center gap-2 group">
        <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-teal-600 shadow-lg shadow-teal-600/20 transition-transform group-hover:scale-105">
          <Leaf className="h-5 w-5 text-white" />
        </div>
        <span className="text-xl font-bold tracking-tight text-gray-900">
          Nova<span className="text-teal-600">life</span>
        </span>
      </Link>

      <div className="w-full max-w-md">{children}</div>

      <p className="mt-8 text-center text-xs text-gray-400">
        Demo application — no real data is stored or transmitted.
      </p>
    </div>
  );
}