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

interface HeaderProps {
  variant?: 'default' | 'dark' | 'dashboard'
  showAuth?: boolean
  showBackButton?: boolean
  backHref?: string
  backText?: string
  onAuthClick?: () => void
}

export default function Header({ 
  variant = 'default', 
  showAuth = true, 
  showBackButton = false,
  backHref = "/",
  backText = "Retour à l'accueil",
  onAuthClick 
}: HeaderProps) {
  const getHeaderStyles = () => {
    switch (variant) {
      case 'dark':
        return "border-b border-gray-700 bg-gray-800/80 backdrop-blur-sm"
      case 'dashboard':
        return "border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900"
      default:
        return "border-b bg-white/80 dark:bg-gray-900/80 backdrop-blur-sm sticky top-0 z-50 transition-colors duration-300"
    }
  }

  const getLogoStyles = () => {
    switch (variant) {
      case 'dark':
        return {
          shield: "h-8 w-8 text-blue-400",
          text: "text-2xl font-bold text-gray-100",
          badge: "ml-2 bg-gray-700 text-gray-200"
        }
      case 'dashboard':
        return {
          shield: "h-8 w-8 text-blue-600 dark:text-blue-400",
          text: "text-xl font-bold text-gray-900 dark:text-gray-100",
          badge: "ml-2"
        }
      default:
        return {
          shield: "h-8 w-8 text-blue-600 dark:text-blue-400",
          text: "text-2xl font-bold text-gray-900 dark:text-gray-100",
          badge: "ml-2"
        }
    }
  }

  const logoStyles = getLogoStyles()

  return (
    <header className={getHeaderStyles()}>
      <div className="container mx-auto px-4 py-4 flex justify-between items-center">
        <Link href="/" className="flex items-center space-x-2">
          <Shield className={logoStyles.shield} />
          <span className={logoStyles.text}>DocV</span>
          <Badge variant="secondary" className={logoStyles.badge}>
            By 4NK
          </Badge>
        </Link>

        <div className="flex items-center space-x-4">
          {showBackButton && (
            <Link href={backHref} className="flex items-center text-blue-400 hover:text-blue-500">
              <ArrowLeft className="h-4 w-4 mr-2" />
              {backText}
            </Link>
          )}

          {showAuth && variant === 'default' && (
            <nav className="hidden md:flex items-center space-x-6">
              <Link href="#produit" className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-300">
                Le produit
              </Link>
              <Link href="#securite" className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-300">
                Sécurité
              </Link>
              <Link href="#tarifs" className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-300">
                Tarifs
              </Link>
              <Link href="/formation">
                <Button variant="outline" className="dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 transition-colors duration-300">
                  Formation
                </Button>
              </Link>
              <Button onClick={onAuthClick} className="dark:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-300">
                Connexion
              </Button>
            </nav>
          )}
        </div>
      </div>
    </header>
  )
}