// src/Components/FormPO/StepIndicator.jsx

import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

const StepIndicator = ({ currentStep, stepData }) => (
    <nav aria-label="Progress" className="mb-10">
        <ol role="list" className="space-y-4 sm:flex sm:space-x-8 sm:space-y-0">
            {stepData.map((item) => (
                <li key={item.step} className="md:flex-1">
                    <div
                        className={`group flex flex-col border-l-4 py-2 pl-4 md:border-l-0 md:border-t-4 md:pb-0 md:pl-0 md:pt-4 ${
                            item.step === currentStep
                                ? `border-indigo-600`
                                : item.step < currentStep
                                ? `border-green-500`
                                : 'border-gray-200'
                        }`}
                    >
                        <span
                            className={`text-sm font-medium ${
                                item.step === currentStep
                                    ? 'text-indigo-600'
                                    : item.step < currentStep
                                    ? 'text-green-600'
                                    : 'text-gray-500'
                            }`}
                        >
                            Langkah {item.step}
                        </span>
                        <span className="text-sm font-semibold flex items-center mt-1">
                            <FontAwesomeIcon icon={item.icon} className="mr-2 h-4 w-4"/>
                            {item.title}
                        </span>
                    </div>
                </li>
            ))}
        </ol>
    </nav>
);

export default StepIndicator;