import { Boxes, ShieldCheck, Layers, Plug, GitCompare, AlertTriangle } from 'lucide-react';

const MODES = [
  { id: 'internal', label: 'Internal Prosthesis', icon: Boxes },
  { id: 'fit', label: 'Fit Shell', icon: ShieldCheck },
  { id: 'cover', label: 'Design Preview', icon: Layers },
  { id: 'ossiguard', label: 'Ossiguard Interface', icon: Plug },
  { id: 'fit-comparison', label: 'Fit Comparison', icon: GitCompare },
  { id: 'conflict', label: 'Conflict View', icon: AlertTriangle },
];

export default function DesignModeBar({ mode, onMode, showOssiguard, onToggleOssiguard, hasOssiguard }) {
  return (
    <div className="flex flex-wrap items-center gap-2 border-b border-shire-border p-2">
      {MODES.map((m) => {
        const Icon = m.icon;
        const active = mode === m.id;
        return (
          <button
            key={m.id}
            onClick={() => onMode(m.id)}
            className={`inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium transition ${active ? 'bg-shire-purple text-white' : 'border border-shire-border text-slate-400 hover:border-shire-purple/40 hover:text-violet-300'}`}
          >
            <Icon className="h-3.5 w-3.5" />
            {m.label}
          </button>
        );
      })}
      {hasOssiguard && (
        <button onClick={onToggleOssiguard} className={`ml-auto inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium transition ${showOssiguard ? 'border border-violet-400/50 bg-violet-400/10 text-violet-200' : 'border border-shire-border text-slate-500'}`}>
          <Plug className="h-3.5 w-3.5" />Ossiguard layer
        </button>
      )}
    </div>
  );
}