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'
