import React from 'react'
import { useTabStore } from '../../stores/tabStore'
import { getFileName } from '../../lib/fileUtils'

export function StatusBar() {
  // B-04: 直接选择数据而非函数引用，确保响应式更新
  const tabs = useTabStore(s => s.tabs)
  const activeTabId = useTabStore(s => s.activeTabId)
  const tab = tabs.find(t => t.id === activeTabId) ?? null

  return (
    <div id="statusbar">
      <div className="status-left">
        <span id="status-text">
          {tab ? (tab.filePath ? getFileName(tab.filePath) : '未命名') : '就绪'}
        </span>
      </div>
      <div className="status-right">
        <span id="status-encoding">UTF-8</span>
        <span className="status-divider">|</span>
        <span id="status-lang">Markdown</span>
      </div>
    </div>
  )
}