import { Link } from 'react-router-dom'
import { useApp } from '../context/AppContext'
import { colorToCss } from '../utils/color'

export default function UserBar() {
  const { state } = useApp()
  const user = state.currentUser

  return (
    <div className="flex items-center gap-2 px-3 py-3 border-t border-gray-700/60 bg-gray-900/80">
      <div
        className="w-8 h-8 rounded-full flex items-center justify-center text-white text-sm font-semibold shrink-0"
        style={{ backgroundColor: colorToCss(user?.color) }}
      >
        {user?.name?.[0]?.toUpperCase() ?? '?'}
      </div>
      <span className="text-sm font-medium text-gray-200 truncate flex-1">
        {user?.name ?? '…'}
      </span>
      <Link
        to="/settings"
        title="Settings"
        className="text-gray-400 hover:text-gray-200 transition-colors text-base px-1"
      >
        ⚙
      </Link>
    </div>
  )
}