import { CheckCircle2, Loader2, Circle, Workflow } from 'lucide-react';
import { demoWorkflow } from '@/lib/demoData';

const statusStyle = {
  completed: { ring: 'border-cyan-400 bg-cyan-400/15 text-cyan-300', label: 'Completed', Icon: CheckCircle2 },
  in_progress: { ring: 'border-amber-400 bg-amber-400/15 text-amber-300', label: 'In Progress', Icon: Loader2 },
  pending: { ring: 'border-white/15 bg-white/[.03] text-slate-500', label: 'Pending', Icon: Circle }
};

const WorkflowTimeline = () => (
  <div className="glass-panel p-3">
    <div className="mb-3 flex items-center gap-2 text-[10px] uppercase tracking-[.18em] text-cyan-400">
      <Workflow className="h-3.5 w-3.5" /> Lab Workflow
    </div>
    <div className="flex items-center gap-1 overflow-x-auto pb-1">
      {demoWorkflow.map((s, i) => {
        const st = statusStyle[s.status];
        return (
          <div key={s.n} className="flex items-center">
            <div className="flex min-w-[88px] flex-col items-center text-center">
              <div className={`grid h-7 w-7 place-items-center rounded-full border ${st.ring}`}>
                <st.Icon className={`h-3.5 w-3.5 ${s.status === 'in_progress' ? 'animate-spin' : ''}`} />
              </div>
              <div className="mt-1 text-[9px] font-semibold text-slate-200">{s.n}. {s.name}</div>
              <div className="text-[8px] text-slate-500">{st.label}</div>
            </div>
            {i < demoWorkflow.length - 1 && <div className={`h-px w-6 ${s.status === 'completed' ? 'bg-cyan-400/50' : 'bg-white/10'}`} />}
          </div>
        );
      })}
    </div>
  </div>
);
export default WorkflowTimeline;