'use client';

import React from 'react';
import { Utensils, ShieldCheck } from 'lucide-react';

const AuthLayout = ({
  children,
  title,
  des,
  image,
  isMap
}: {
  children: React.ReactNode;
  title: string;
  des: any;
  image?: any;
  isMap?: boolean;
}) => {
  return (
    <div className="h-screen w-full bg-white flex flex-col overflow-y-auto font-sans">
      {/* Full-width Sticky Top Header */}
      <header className="sticky top-0 z-30 w-full bg-white border-b border-slate-100 px-4 sm:px-8 lg:px-12 py-3.5 flex items-center justify-between shadow-2xs shrink-0">
        <div className="flex items-center gap-2.5">
          <div className="h-9 w-9 rounded-xl bg-[var(--primary-brand)] flex items-center justify-center text-white shadow-sm">
            <Utensils className="h-5 w-5" />
          </div>
          <span className="text-xl font-extrabold tracking-tight text-slate-900">
            Ready<span className="text-[var(--primary-brand)]">Eats</span>
          </span>
          <span className="rounded-full bg-orange-100 px-2.5 py-0.5 text-[10px] font-bold text-orange-600 uppercase tracking-wider ml-1">
            Vendor
          </span>
        </div>
        <div className="flex items-center gap-2 bg-slate-50 border border-slate-200/60 px-3 py-1 rounded-full text-xs font-semibold text-slate-700">
          <ShieldCheck className="h-3.5 w-3.5 text-[var(--primary-brand)]" />
          <span>Partner Onboarding</span>
        </div>
      </header>

      {/* Main Page Content Area */}
      <main className="flex-1 w-full max-w-6xl mx-auto px-4 sm:px-8 lg:px-12 py-6 sm:py-8 flex flex-col">
        {/* Title & Description Header */}
        <div className="mb-6 pb-4 border-b border-slate-100">
          <h1 className="text-2xl sm:text-3xl font-extrabold text-slate-900 tracking-tight">
            {title}
          </h1>
          {des && (
            <p className="mt-1.5 text-sm sm:text-base text-slate-500 leading-relaxed max-w-3xl">
              {des}
            </p>
          )}
        </div>

        {/* Page Form Children */}
        <div className={`w-full flex-1 pb-24 ${isMap ? 'h-full' : ''}`}>
          {children}
        </div>
      </main>
    </div>
  );
};

export default AuthLayout;