import { ArrowLeft } from 'lucide-react';
import { useNavigate } from 'react-router-dom';

interface LoginLayoutProps {
  children: React.ReactNode;
  topIcon: React.ReactNode;
  title: string;
  subtitle: string;
  backUrl: string;
}

export default function LoginLayout({ children, topIcon, title, subtitle, backUrl }: LoginLayoutProps) {
  const navigate = useNavigate();

  return (
    <div className="min-h-screen bg-gray-50 flex flex-col">
      {/* Top Orange Gradient Hero - Same for ALL roles */}
      <div className="brand-gradient relative px-6 pt-6 pb-16 rounded-b-[32px] shadow-xl">
        {/* Decorative circles */}
        <div className="absolute top-8 right-8 w-24 h-24 rounded-full bg-white/10" />
        <div className="absolute top-16 right-24 w-12 h-12 rounded-full bg-white/5" />
        <div className="absolute bottom-6 left-10 w-16 h-16 rounded-full bg-white/5" />
        <div className="absolute top-20 left-4 w-8 h-8 rounded-full bg-white/5" />

        {/* Back button */}
        <button
          onClick={() => navigate(backUrl)}
          className="flex items-center gap-1.5 text-white/80 text-sm font-medium mb-6 hover:text-white transition-colors z-10 relative"
        >
          <ArrowLeft className="w-4 h-4" />
          Back
        </button>

        {/* Sandbox's Innovation Logo */}
        <div className="flex justify-center mb-3">
          <img
            src="/logo.jpg"
            alt="Sandbox's Innovation"
            className="h-12 w-auto rounded-xl shadow-lg border-2 border-white/30"
          />
        </div>

        {/* Top Role Icon */}
        <div className="flex justify-center mb-4">
          <div className="w-16 h-16 bg-white/20 backdrop-blur-sm rounded-2xl flex items-center justify-center shadow-lg border border-white/20">
            {topIcon}
          </div>
        </div>

        {/* Title */}
        <h1 className="text-center text-2xl font-extrabold text-white">{title}</h1>
        <p className="text-center text-sm text-white/70 mt-1">{subtitle}</p>
      </div>

      {/* Content Card - overlaps the gradient */}
      <div className="flex-1 px-5 -mt-8 pb-8">
        <div className="bg-white rounded-3xl shadow-lg p-6 relative z-10">
          {children}
        </div>
      </div>

      {/* Footer branding */}
      <div className="text-center pb-6">
        <p className="text-xs text-gray-300">Powered by Sandbox&apos;s Innovation</p>
      </div>
    </div>
  );
}
