import processingStepsStyles from "~/styles/components/processing-steps.css?url";

export interface Step {
  title: string;
  description: string;
  status: 'waiting' | 'active' | 'done' | 'error';
}

interface ProcessingStepsProps {
  steps: Step[];
  className?: string;
}

export function links() {
  return [{ rel: "stylesheet", href: processingStepsStyles }];
}

export function ProcessingSteps({ steps, className = "" }: ProcessingStepsProps) {
  return (
    <div className={`steps-container-horizontal ${className}`}>
      {steps.map((step, index) => (
        <div 
          key={index} 
          className={`step-item-horizontal ${step.status}`}
          data-step={index + 1}
        >
          <div className="step-icon-horizontal">
            {step.status === 'done' && <i className="ri-check-line"></i>}
            {step.status === 'error' && <i className="ri-close-line"></i>}
            {step.status === 'active' && <span className="loading-spinner"></span>}
            {step.status === 'waiting' && <span>{index + 1}</span>}
          </div>
          <div className="step-content-horizontal">
            <div className="step-title-horizontal">{step.title}</div>
            <div className="step-description-horizontal">{step.description}</div>
          </div>
        </div>
      ))}
    </div>
  );
}