'use client'

import * as motion from 'framer-motion/m'
import Link from 'next/link'
import { useTranslations } from 'next-intl'
import { Leaf, ShoppingBag } from 'lucide-react'

interface AuthContainerProps {
  children: React.ReactNode
  title: string
  subtitle: string
  alternateText?: string
  alternateLink?: string
  alternateLinkText?: string
}

export default function AuthContainer({
  children,
  title,
  subtitle,
  alternateText,
  alternateLink,
  alternateLinkText,
}: AuthContainerProps) {
  const tShared = useTranslations('Auth.shared')
  return (
    <div className="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-primary/5 to-secondary/5">
      {/* Decorative Elements */}
      <div className="absolute top-0 left-0 w-72 h-72 bg-primary/10 rounded-full blur-3xl" />
      <div className="absolute bottom-0 right-0 w-96 h-96 bg-secondary/10 rounded-full blur-3xl" />
      
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5 }}
        className="max-w-md w-full space-y-8 bg-white rounded-2xl shadow-xl p-8 relative z-10"
      >
        {/* Logo */}
        <div className="text-center">
          <Link href="/" className="inline-block">
            <div className="flex items-center justify-center gap-2 mb-4">
              <div className="w-10 h-10 bg-gradient-primary rounded-xl flex items-center justify-center">
                <ShoppingBag size={20} className="text-white" />
              </div>
              <span className="text-2xl font-extrabold text-gradient-primary">
                DesiCart.pk
              </span>
            </div>
          </Link>
          
          <h2 className="text-2xl font-bold text-dark">{title}</h2>
          <p className="text-gray-custom text-sm mt-2">{subtitle}</p>
        </div>

        {/* Form */}
        <div className="mt-8 space-y-6">
          {children}
        </div>

        {/* Alternate Link */}
        {alternateText && alternateLink && (
          <div className="text-center">
            <p className="text-sm text-gray-custom">
              {alternateText}{' '}
              <Link href={alternateLink} className="text-primary font-medium hover:underline">
                {alternateLinkText}
              </Link>
            </p>
          </div>
        )}

        {/* Trust Badge */}
        <div className="text-center pt-4 border-t border-gray-100">
          <div className="flex items-center justify-center gap-4">
            <div className="flex items-center gap-1">
              <Leaf size={14} className="text-secondary" />
              <span className="text-xs text-gray-custom">{tShared('freshBadge')}</span>
            </div>
            <div className="w-px h-3 bg-gray-200" />
            <div className="flex items-center gap-1">
              <ShoppingBag size={14} className="text-primary" />
              <span className="text-xs text-gray-custom">{tShared('secureCheckout')}</span>
            </div>
          </div>
        </div>
      </motion.div>
    </div>
  )
}