import { useNavigate } from 'react-router-dom'
import { usePermissions } from '@/hooks/usePermissions'

export function L1CoverageBanner() {
  const perms = usePermissions()
  const navigate = useNavigate()

  // Show only for engineer-coverers / owners-stepping-in. Native L1 doesn't see it.
  if (perms.isL1Tech) return null
  if (!perms.canCoverL1) return null

  return (
    <div className="bg-info/10 text-info text-sm px-4 py-1.5 flex items-center justify-between border-b border-info/20">
      <span>You're covering L1. Actions logged as coverage.</span>
      <button
        onClick={() => navigate('/')}
        className="text-info hover:underline underline-offset-2"
      >
        Switch back →
      </button>
    </div>
  )
}