'use client'

import { useState, useEffect } from 'react'
import Link from 'next/link'
import { Button } from '@/components/ui/button'
import { Cookie } from 'lucide-react'

export function CookieConsent() {
  const [visible, setVisible] = useState(false)

  useEffect(() => {
    const consent = localStorage.getItem('cookie-consent')
    if (!consent) {
      const timer = setTimeout(() => setVisible(true), 1000)
      return () => clearTimeout(timer)
    }
  }, [])

  const accept = () => {
    localStorage.setItem('cookie-consent', 'accepted')
    setVisible(false)
  }

  const decline = () => {
    localStorage.setItem('cookie-consent', 'declined')
    setVisible(false)
  }

  if (!visible) return null

  return (
    <div className="fixed bottom-0 left-0 right-0 z-[9999] p-4 animate-in slide-in-from-bottom-4 duration-500">
      <div className="max-w-3xl mx-auto bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-2xl shadow-2xl p-5 md:p-6">
        <div className="flex items-start gap-4">
          <div className="shrink-0 mt-0.5">
            <Cookie className="w-7 h-7 text-red-600" />
          </div>
          <div className="flex-1 space-y-3">
            <h3 className="font-semibold text-gray-900 dark:text-gray-100 text-sm md:text-base">
              Wir verwenden Cookies
            </h3>
            <p className="text-xs md:text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
              Diese Website verwendet technisch notwendige Cookies, um die Authentifizierung und
              grundlegende Funktionen zu ermöglichen. Es werden keine Tracking- oder Werbe-Cookies eingesetzt.
              Weitere Informationen findest du in unserer{' '}
              <Link href="/datenschutz" className="text-red-600 hover:text-red-500 underline">
                Datenschutzerklärung
              </Link>.
            </p>
            <div className="flex flex-col sm:flex-row gap-2 pt-1">
              <Button
                onClick={accept}
                className="bg-red-600 hover:bg-red-700 text-white text-sm h-9 px-6"
              >
                Akzeptieren
              </Button>
              <Button
                onClick={decline}
                variant="outline"
                className="text-sm h-9 px-6"
              >
                Nur notwendige
              </Button>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
