import { RefreshCw } from 'lucide-react'

export function UpdateBanner({ visible }: { visible: boolean }) {
  if (!visible) return null
  return (
    <div style={{
      position: 'fixed',
      bottom: 0,
      left: 0,
      right: 0,
      zIndex: 9999,
      background: 'var(--navy)',
      color: 'var(--text)',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      gap: '12px',
      padding: '10px 16px',
      fontSize: '14px',
      boxShadow: '0 -2px 8px rgba(0,0,0,0.3)',
    }}>
      <span>A new version is available.</span>
      <button
        onClick={() => window.location.reload()}
        style={{
          display: 'flex',
          alignItems: 'center',
          gap: '6px',
          background: 'var(--gold)',
          color: 'var(--navy)',
          border: 'none',
          borderRadius: '4px',
          padding: '6px 14px',
          fontWeight: 600,
          cursor: 'pointer',
          fontSize: '13px',
        }}
      >
        <RefreshCw size={14} strokeWidth={1.75} />
        Reload
      </button>
    </div>
  )
}