import { getTranslations } from 'next-intl/server';

interface WorkflowStep {
  number: string;
  title: string;
}

const Workflow = async () => {
  const t = await getTranslations('pages.about.workflow');

  let workflowSteps: WorkflowStep[] = [];
  try {
    const steps = t.raw('steps') as WorkflowStep[];
    if (Array.isArray(steps)) {
      workflowSteps = steps;
    }
  } catch {
    workflowSteps = [];
  }

  if (workflowSteps.length === 0) {
    return null;
  }

  const totalSteps = workflowSteps.length;

  return (
    <div className="max-w-7xl mx-auto" role="list">
      {workflowSteps.map((step) => (
        <div
          key={step.number}
          className="group relative"
          role="listitem"
          aria-label={`Step ${step.number} of ${totalSteps}: ${step.title}`}
        >
          <div className="flex items-center py-6 border-b border-border group-hover:border-accent transition-colors duration-300">
            <div className="w-12 sm:w-20 text-sm text-muted-foreground/60 font-light">
              {step.number}
            </div>
            <h3 className="text-sm sm:text-base text-muted-foreground group-hover:text-foreground transition-colors duration-300">
              {step.title}
            </h3>
          </div>

          {/* Line Indicator */}
          <div
            className="absolute left-0 bottom-0 w-0 h-px bg-foreground group-hover:w-full transition-all duration-500 ease-out"
            aria-hidden="true"
          />
        </div>
      ))}
    </div>
  );
};

export default Workflow;