import React from 'react'

interface ModifiedBannerProps {
  onReload: () => void
  onDismiss: () => void
}

export const ModifiedBanner = React.memo(function ModifiedBanner({
  onReload,
  onDismiss,
}: ModifiedBannerProps) {
  return (
    <div id="modified-banner" role="alert" aria-live="assertive">
      <span>文件已被外部程序修改</span>
      <button className="banner-btn" onClick={onReload} aria-label="重新加载文件">
        重新加载
      </button>
      <button className="banner-btn" onClick={onDismiss} aria-label="忽略外部修改">
        忽略
      </button>
    </div>
  )
})

ModifiedBanner.displayName = 'ModifiedBanner'