import { ColorSwatch, Element4, LampCharge, Magicpen, Setting2, TruckFast } from "iconsax-reactjs";
import { FC } from "react";

const steps = [
  { label: "تحلیل نیاز برند", Icon: LampCharge },
  { label: "طراحی و آماده‌سازی فایل", Icon: Magicpen },
  { label: "انتخاب فناوری و متریال", Icon: Element4 },
  { label: "کنترل رنگ و نمونه‌گیری", Icon: ColorSwatch },
  { label: "عملیات تکمیلی", Icon: Setting2 },
  { label: "تحویل به موقع", Icon: TruckFast },
];

const StepSection: FC = () => {
  return (
    <div className="w-full px-4 sm:px-8 lg:px-[120px] bg-secondary">
      <div className="flex gap-6 lg:gap-4 lg:justify-between items-center h-auto py-4 lg:py-0 lg:h-[80px] overflow-x-auto scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
        {steps.map(({ label, Icon }) => (
          <div key={label} className="flex gap-3 items-center shrink-0">
            <Icon variant="Bulk" size={24} color="currentColor" className="text-primary" />
            <div className="font-bold text-sm whitespace-nowrap">{label}</div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default StepSection;