import Link from "next/link"
import { Badge } from "@/components/ui/badge"
import { Shield } from "lucide-react"

interface FooterProps {
  variant?: 'default' | 'dark'
  showNavigation?: boolean
  onAuthClick?: () => void
}

export default function Footer({ 
  variant = 'default', 
  showNavigation = true,
  onAuthClick 
}: FooterProps) {
  const getFooterStyles = () => {
    switch (variant) {
      case 'dark':
        return "bg-gray-900 text-gray-300 py-8 px-4"
      default:
        return "bg-gray-900 dark:bg-gray-900 text-white py-12 px-4 transition-colors"
    }
  }

  return (
    <footer className={getFooterStyles()}>
      <div className="container mx-auto">
        {showNavigation ? (
          <div className="grid md:grid-cols-2 gap-8">
            <div>
              <div className="flex items-center space-x-2 mb-4">
                <Shield className="h-8 w-8 text-blue-400" />
                <span className="text-2xl font-bold">DocV</span>
                <Badge variant="secondary" className="ml-2">
                  By 4NK
                </Badge>
              </div>
              <p className="text-gray-400 dark:text-gray-300 mb-4">
                4NK, pionnier du Web 5.0. Conçoit et développe des solutions de souveraineté.
              </p>
              <p className="text-gray-400 dark:text-gray-300">contact@docv.fr</p>
            </div>

            <div>
              <h3 className="text-lg font-semibold mb-4 text-white dark:text-white">Navigation</h3>
              <div className="space-y-2">
                <Link href="#produit" className="block text-gray-400 dark:text-gray-300 hover:text-white transition-colors">
                  Le produit
                </Link>
                <Link href="#securite" className="block text-gray-400 dark:text-gray-300 hover:text-white transition-colors">
                  Sécurité
                </Link>
                <Link href="#tarifs" className="block text-gray-400 dark:text-gray-300 hover:text-white transition-colors">
                  Tarifs
                </Link>
                <Link href="/formation" className="block text-gray-400 dark:text-gray-300 hover:text-white transition-colors">
                  Formation
                </Link>
                <Link href="" onClick={onAuthClick} className="block text-gray-400 dark:text-gray-300 hover:text-white transition-colors">
                  Connexion
                </Link>
              </div>
            </div>
          </div>
        ) : (
          <div className="text-center">
            <div className="flex items-center justify-center space-x-2 mb-4">
              <Shield className="h-6 w-6 text-blue-400" />
              <span className="text-xl font-bold text-gray-100">DocV</span>
              <Badge variant="secondary" className="bg-gray-700 text-gray-200">By 4NK</Badge>
            </div>
            <p className="text-gray-400">
              4NK, pionnier du Web 5.0 - Solutions de souveraineté numérique
            </p>
          </div>
        )}

        {showNavigation && (
          <div className="border-t border-gray-800 dark:border-gray-700 mt-8 pt-8 text-center text-gray-400 dark:text-gray-300">
            <p>&copy; 2025 4NK. Tous droits réservés.</p>
          </div>
        )}
      </div>
    </footer>
  )
}