import { useState, useEffect } from 'react'

function Footer() {
  const [currentYear, setCurrentYear] = useState(new Date().getFullYear())
  const [logoError, setLogoError] = useState(false)

  useEffect(() => {
    setCurrentYear(new Date().getFullYear())
  }, [])

  return (
    <footer className="bg-slate-800 border-t border-slate-700 mt-auto">
      <div className="max-w-20xl mx-auto px-8 py-6">
        <div className="flex flex-col md:flex-row items-center justify-between gap-4">
          {/* Logo */}
          <div className="flex items-center gap-3">
            {!logoError ? (
              <img 
                src="/logo.webp" 
                alt="Certigo Addon Logo" 
                className="h-8 w-auto"
                onError={() => setLogoError(true)}
              />
            ) : (
              <div className="h-8 w-8 bg-slate-600 rounded flex items-center justify-center text-white font-bold text-sm">
                CA
              </div>
            )}
            <span className="text-slate-300 font-semibold text-lg">Certigo Addon</span>
          </div>

          {/* Copyright */}
          <div className="text-slate-400 text-sm">
            © {currentYear} Certigo Addon. Alle Rechte vorbehalten.
          </div>
        </div>
      </div>
    </footer>
  )
}

export default Footer