export default function ViewportModeBar({ modes, active, onChange }) {
  return (
    <div className="inline-flex rounded-xl border border-white/10 bg-[#0a0e13]/80 p-1 backdrop-blur">
      {modes.map(([key, label, Icon]) => (
        <button key={key} onClick={() => onChange(key)} title={label}
          className={`inline-flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-[11px] font-medium transition ${active === key ? 'bg-cyan-400/15 text-cyan-100 ring-1 ring-cyan-400/30' : 'text-slate-400 hover:text-white'}`}>
          {Icon && <Icon size={13} />}<span className="hidden xl:inline">{label}</span>
        </button>
      ))}
    </div>
  );
}