import { Rocket } from 'lucide-react'
import { ReactNode } from 'react'

interface AuthLayoutProps {
  children: ReactNode
  title: string
  subtitle: string
}

export function AuthLayout({ children, title, subtitle }: AuthLayoutProps) {
  return (
    <div className="min-h-screen flex flex-col lg:flex-row">
      {/* Left side - Hero */}
      <div className="lg:w-1/2 relative overflow-hidden">
        <div
          className="absolute inset-0 flex flex-col justify-center items-center p-12 bg-black/50"
          style={{
            backgroundImage: 'url("https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1200")',
            backgroundSize: 'cover',
            backgroundPosition: 'center',
          }}
        >
          <div className="relative z-10 max-w-md text-center">
            <div className="inline-flex items-center justify-center gap-3 mb-6">
              <div className="size-12 flex items-center justify-center rounded-xl bg-gradient-to-br from-primary to-primary-glow text-white shadow-lg">
                <Rocket className="w-7 h-7" />
              </div>
              <h1 className="text-white text-3xl font-bold">ScaleSite</h1>
            </div>
            <h2 className="text-white text-2xl md:text-3xl font-bold mb-4">
              {title}
            </h2>
            <p className="text-gray-300 text-lg">
              {subtitle}
            </p>
          </div>
        </div>
      </div>

      {/* Right side - Form */}
      <div className="lg:w-1/2 flex items-center justify-center p-8 lg:p-12 bg-background">
        <div className="w-full max-w-md">
          {children}
        </div>
      </div>
    </div>
  )
}