'use client'

import { useEffect, useState } from 'react'
import Link from 'next/link'
import { Info, X } from 'lucide-react'

const KEY = 'lageplan-usage-notice-dismissed'

/**
 * Dezenter, minimierbarer Hinweis im Dashboard/App-Bereich.
 * Nach Kenntnisnahme minimiert (localStorage) — verschwindet aber nicht aus den Rechtsseiten
 * (/verantwortungsvolle-nutzung, Footer).
 */
export function UsageNoticeBanner() {
  const [dismissed, setDismissed] = useState(true)

  useEffect(() => {
    try { setDismissed(localStorage.getItem(KEY) === '1') } catch { setDismissed(false) }
  }, [])

  if (dismissed) return null

  return (
    <div className="flex items-start gap-2 px-3 py-2 bg-amber-50 dark:bg-amber-950/30 border-b border-amber-200 dark:border-amber-900 text-xs text-amber-800 dark:text-amber-300 print:hidden">
      <Info className="w-4 h-4 mt-0.5 shrink-0" />
      <p className="flex-1 leading-relaxed">
        Lageplan ist ein unterstützendes Werkzeug ohne garantierte Verfügbarkeit. Bitte haltet aktuelle
        Offline- und Notfallunterlagen bereit.{' '}
        <Link href="/verantwortungsvolle-nutzung" className="underline font-medium">Mehr erfahren</Link>.
      </p>
      <button
        onClick={() => { try { localStorage.setItem(KEY, '1') } catch {}; setDismissed(true) }}
        aria-label="Hinweis minimieren"
        className="shrink-0 rounded p-0.5 hover:bg-amber-100 dark:hover:bg-amber-900/50"
      >
        <X className="w-3.5 h-3.5" />
      </button>
    </div>
  )
}