import CalendarTick from "@/components/icons/CalendarTick";
import LocationAdd from "@/components/icons/LocationAdd";
import UserEdit from "@/components/icons/UserEdit";

function Step({ value }) {
  const list = [
    { icon: <UserEdit active={value >= 0} />, name: "اطلاعات عمومی" },
    { icon: <LocationAdd active={value >= 1} />, name: "اطلاعات مطب" },
    { icon: <CalendarTick active={value >= 2} />, name: "روزهای کاری" },
  ];

  return (
    <ul className="flex items-center justify-center">
      {list.map((item, idx) => (
        <li className="flex items-center justify-center" key={idx}>
          <div className="flex flex-col items-center justify-center gap-2">
            <div
              className={`flex items-center bg-[#F6F6F6] justify-center p-[18px] 
                w-[32px] h-[32px] sm:w-[46px] sm:h-[46px] md:w-[60px] md:h-[60px] lg:w-[75px] lg:h-[75px] rounded-full
                relative overflow-hidden before:delay-500  before:transition-all before:duration-500 
                before:absolute before:w-full before:h-full before:bg-[#5559CE] dark:bg-[#D7D8ED]
          ${
            value >= idx
              ? "before:right-0 !bg-transparent delay-700"
              : "before:-right-full"
          }`}
            >
              <div className="z-10 delay-500">{item.icon}</div>
            </div>
            <p
              className={`text-[10px] sm:text-[12px] md:text-[14px] lg:text-[16px] text-nowrap delay-500
           ${
             value >= idx
               ? "font-bold text-[#5559CE]"
               : "font-normal text-[#616161] dark:text-[#a1a1a1]"
           }`}
            >
              {item.name}
            </p>
          </div>
          {list.length > idx + 1 && (
            <span
              className={`block rounded-[16px] transition-all duration-500 h-[2px] 
                bg-[#EFEFEF] dark:bg-[#EFEFEF] w-[35px] sm:w-[56px] md:w-[77px] lg:w-[100px]
                relative overflow-hidden before:transition-all before:duration-500 
                before:absolute before:w-full before:h-full before:bg-[#5559CE] before:ease-linear

                 ${value > idx ? "before:right-0" : "before:-right-full"}`}
            ></span>
          )}
        </li>
      ))}
    </ul>
  );
}

export default Step;