'use client'

import { DebugToggle } from './status-bar-debug-toggle'
import { debugProps } from '@/lib/debug'

const buildDate = process.env.NEXT_PUBLIC_BUILD_DATE
  ? new Date(process.env.NEXT_PUBLIC_BUILD_DATE).toLocaleDateString('nl-NL', {
      day: 'numeric',
      month: 'short',
      year: 'numeric',
    })
  : '—'

const version = process.env.NEXT_PUBLIC_APP_VERSION ?? '0.0.0'
const isDev = process.env.NODE_ENV !== 'production'

export function StatusBar() {
  return (
    <footer
      className="shrink-0 border-t border-border bg-surface-container-low h-14 px-4 flex items-center justify-between text-sm text-muted-foreground select-none"
      {...debugProps('status-bar')}
    >
      <span data-debug-id="status-bar__copyright">© {new Date().getFullYear()} Scrum4Me</span>
      <span data-debug-id="status-bar__build-info">v{version} · gebouwd op {buildDate}{isDev && <DebugToggle />}</span>
    </footer>
  )
}