"use client";

import React from "react";

type Step = {
  label: string;
  done?: boolean;
  active?: boolean;
};

export default function Workflow({
  steps,
}: {
  steps: Step[];
}) {
  return (
    <div className="bg-card border rounded-xl p-6">
      <h3 className="text-lg font-semibold mb-4">Project Workflow</h3>

      <div className="flex items-center justify-between">
        {steps.map((step, index) => (
          <React.Fragment key={index}>
            <WorkflowStep {...step} />
            {index !== steps.length - 1 && (
              <Line active={step.done || step.active} />
            )}
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

function WorkflowStep({ label, active, done }: Step) {
  return (
    <div className="flex flex-col items-center gap-2 min-w-[90px]">
      <div
        className={`h-9 w-9 rounded-full flex items-center justify-center border 
          ${done ? "bg-green-500/10 border-green-500 text-green-500" : ""}
          ${active && !done ? "bg-blue-500/10 border-blue-500 text-blue-500" : ""}
          ${!active && !done ? "bg-muted border-border text-muted-foreground" : ""}
        `}
      >
        ●
      </div>

      <span
        className={`text-xs text-center
          ${done ? "text-green-500" : ""}
          ${active && !done ? "text-blue-500" : ""}
          ${!active && !done ? "text-muted-foreground" : ""}
        `}
      >
        {label}
      </span>
    </div>
  );
}

function Line({ active }: { active?: boolean }) {
  return (
    <div
      className={`flex-1 h-[2px] mx-2 ${
        active ? "bg-green-500" : "bg-border"
      }`}
    />
  );
}
