'use client'

import { useState, useEffect } from 'react'
import { X, Zap } from 'lucide-react'

const BANNER_DISMISSED_KEY = 'pounce_beta_banner_dismissed'

export function BetaBanner() {
  const [isDismissed, setIsDismissed] = useState(true) // Start hidden to avoid flash

  useEffect(() => {
    // Check localStorage after mount
    const dismissed = localStorage.getItem(BANNER_DISMISSED_KEY)
    setIsDismissed(dismissed === 'true')
  }, [])

  const handleDismiss = () => {
    setIsDismissed(true)
    localStorage.setItem(BANNER_DISMISSED_KEY, 'true')
  }

  if (isDismissed) return null

  return (
    <div className="bg-accent/10 border-b border-accent/20 px-4 py-1.5 flex items-center justify-center gap-2 text-xs font-mono relative flex-shrink-0">
      <Zap className="w-3 h-3 text-accent flex-shrink-0" />
      <p className="text-white/70">
        <span className="text-accent font-medium">Pounce is in Public Beta.</span>
        {' '}I ship code daily based on your feedback. If you spot a glitch, hit me up on{' '}
        <a 
          href="https://discord.gg/gqyzWMpj8z" 
          target="_blank" 
          rel="noopener noreferrer"
          className="text-accent hover:text-white underline underline-offset-2 transition-colors"
        >
          Discord
        </a>
        .
      </p>
      <button
        onClick={handleDismiss}
        className="absolute right-2 top-1/2 -translate-y-1/2 p-1 text-white/40 hover:text-white transition-colors"
        aria-label="Dismiss banner"
      >
        <X className="w-3.5 h-3.5" />
      </button>
    </div>
  )
}