import useTheme from '../theme.jsx'

export default function StatusBar() {
  const { dark, setDark } = useTheme()

  return (
    <div className="bg-white border-b border-gray-200 px-4 h-8 flex items-center gap-4 shrink-0 text-xs">
      <span className="text-gray-400">Source</span>
      <span className="font-medium text-gray-700">sales_orders</span>
      <span className="text-gray-200">|</span>
      <span className="text-gray-400">Version</span>
      <span className="font-medium text-gray-700">FY2026 Plan</span>
      <span className="text-gray-200">|</span>
      <span className="text-gray-400">Baseline</span>
      <span className="font-medium text-gray-700">44,313 rows</span>
      <span className="text-gray-200">|</span>
      <span className="text-gray-400">Status</span>
      <span className="text-green-600 font-medium">open</span>
      <div className="ml-auto">
        <button
          onClick={() => setDark(d => !d)}
          className="w-6 h-6 flex items-center justify-center rounded hover:bg-gray-100"
          title={dark ? 'Switch to light mode' : 'Switch to dark mode'}
        >
          {dark ? (
            <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
              <path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8z"/>
            </svg>
          ) : (
            <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
              <path d="M6 .278a.768.768 0 0 1 1.065.02A.75.75 0 0 1 5.792 15.5a.75.75 0 0 1-1.498-.075.768.768 0 0 1-.02-1.05A8 8 0 1 0 6.278 14.72a.768.768 0 0 1-1.055-.02A.75.75 0 0 1 2.5 13.75a.75.75 0 0 1 1.498.075A8 8 0 1 0 6 .278z"/>
            </svg>
          )}
        </button>
      </div>
    </div>
  )
}