import ChevronRightIcon from "@/assets/report/chevron-right.svg?react";
import { Pill } from "@/components/atoms/Pill";
import { Surface } from "@/components/atoms/Surface";
import { UI_PRIMARY_GRADIENT_CLASS } from "@/components/atoms/uiTokens";
import type { WorkflowStep } from "@/features/plan/types/marketingPlan";

type ContentStrategyWorkflowTabProps = {
  steps: WorkflowStep[];
};

export function ContentStrategyWorkflowTab({ steps }: ContentStrategyWorkflowTabProps) {
  return (
    <div className="flex md:flex-row flex-col gap-4 items-stretch animate-fade-in-up">
      {steps.map((step, i) => (
        <div key={step.step} className="flex md:flex-row flex-col items-center gap-4 flex-1 min-w-0">
          <Surface className="flex-1 w-full">
            <div
              className={`w-10 h-10 rounded-full text-white title-14 flex items-center justify-center mb-3 ${UI_PRIMARY_GRADIENT_CLASS}`}
            >
              {step.step}
            </div>
            <h4 className="title-14 text-navy-900 mb-1 break-keep">{step.name}</h4>
            <p className="body-14 text-neutral-70 mb-3 break-keep">{step.description}</p>
            <div className="flex flex-wrap gap-2">
              <Pill size="sm" weight="none" className="bg-lavender-100 text-violet-700 font-normal">
                {step.owner}
              </Pill>
              <Pill size="sm" weight="none" className="bg-neutral-10 text-neutral-70 font-normal">
                {step.duration}
              </Pill>
            </div>
          </Surface>
          {i < steps.length - 1 ? (
            <ChevronRightIcon
              width={20}
              height={20}
              className="text-neutral-40 shrink-0 hidden md:block"
              aria-hidden
            />
          ) : null}
        </div>
      ))}
    </div>
  );
}