import Link from 'next/link'
import { Lock } from 'lucide-react'

interface AuthLayoutProps {
  children: React.ReactNode
  title: string
  subtitle?: string
  showLeftSection?: boolean
}

export function AuthLayout({
  children,
  title,
  subtitle,
  showLeftSection = true,
}: AuthLayoutProps) {
  return (
    <div className="min-h-screen bg-background flex">
      {/* Left Section - Branding */}
      {showLeftSection && (
        <div className="hidden lg:flex lg:w-1/2 bg-gradient-to-br from-primary/10 via-primary/5 to-background flex-col justify-between p-12">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-lg bg-primary flex items-center justify-center">
              <Lock className="w-6 h-6 text-primary-foreground" />
            </div>
            <span className="text-xl font-bold text-foreground">Admin</span>
          </div>

          <div className="space-y-8">
            <div className="space-y-4">
              <h1 className="text-4xl font-bold text-foreground leading-tight">
                Secure Access to Your Admin Panel
              </h1>
              <p className="text-lg text-muted-foreground">
                Manage your entire application with our powerful admin dashboard. Built with security and simplicity in mind.
              </p>
            </div>

            <div className="space-y-4">
              <div className="flex gap-4">
                <div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0">
                  <span className="text-primary font-bold">✓</span>
                </div>
                <div>
                  <h3 className="font-semibold text-foreground">Advanced Security</h3>
                  <p className="text-sm text-muted-foreground">End-to-end encryption and secure authentication</p>
                </div>
              </div>

              <div className="flex gap-4">
                <div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0">
                  <span className="text-primary font-bold">✓</span>
                </div>
                <div>
                  <h3 className="font-semibold text-foreground">24/7 Support</h3>
                  <p className="text-sm text-muted-foreground">Always available when you need help</p>
                </div>
              </div>

              <div className="flex gap-4">
                <div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0">
                  <span className="text-primary font-bold">✓</span>
                </div>
                <div>
                  <h3 className="font-semibold text-foreground">Real-time Analytics</h3>
                  <p className="text-sm text-muted-foreground">Monitor your application in real-time</p>
                </div>
              </div>
            </div>
          </div>

          <p className="text-xs text-muted-foreground">
            © 2024 Admin Panel. All rights reserved.
          </p>
        </div>
      )}

      {/* Right Section - Form */}
      <div className="w-full lg:w-1/2 flex flex-col items-center justify-center p-6 sm:p-8 lg:p-12">
        <div className="w-full max-w-md">
          {/* Mobile Logo */}
          <div className="lg:hidden mb-8 flex items-center gap-3">
            <div className="w-10 h-10 rounded-lg bg-primary flex items-center justify-center">
              <Lock className="w-6 h-6 text-primary-foreground" />
            </div>
            <span className="text-xl font-bold text-foreground">Admin</span>
          </div>

          {/* Form Header */}
          <div className="mb-8">
            <h2 className="text-3xl font-bold text-foreground mb-2">{title}</h2>
            {subtitle && (
              <p className="text-muted-foreground">{subtitle}</p>
            )}
          </div>

          {/* Form Content */}
          {children}

          {/* Footer Note */}
          <p className="text-xs text-muted-foreground text-center mt-8">
            By using this service, you agree to our{' '}
            <Link href="/privacy" className="text-primary hover:text-primary/80 font-medium">
              Privacy Policy
            </Link>
            {' '}and{' '}
            <Link href="/terms" className="text-primary hover:text-primary/80 font-medium">
              Terms of Service
            </Link>
          </p>
        </div>
      </div>
    </div>
  )
}