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="" key={idx}>
          <div className="flex flex-col items-center justify-center gap-2">
            <div
              className={`flex items-center w-fit justify-center p-[18px] rounded-full
          ${value === idx ? "bg-[#5559CE]" : "bg-[#F6F6F6]"}`}
            >
              {item.icon}
            </div>
            <p
              className={`text-[16px]
           ${
             value === idx
               ? "font-bold text-[#5559CE]"
               : "font-normal text-[#616161]"
           }`}
            >
              {item.name}
            </p>
          </div>
        </li>
      ))}
    </ul>
  );
}

export default Step;