import {
  commonTrank,
  iot,
  mechatronics,
  miniMba,
  softwareEng,
  spark,
} from '@/assets/images/spark';
import { gridVariants } from '@/lib/animations';
import { motion } from 'framer-motion';
import { ArrowRight } from 'lucide-react';

// const steps = [
//   {
//     icon: commonTrank,
//     title: (
//       <motion.h5 className="text-secondary-light font-semibold text-center">
//         Common trank
//       </motion.h5>
//     ),
//   },
//   {
//     icon: softwareEng,
//     title: (
//       <motion.h5 className="text-secondary-light font-semibold text-center">
//         Software eng
//       </motion.h5>
//     ),
//   },
//   {
//     icon: mechatronics,
//     title: (
//       <motion.h5 className="text-secondary-light font-semibold text-center">
//         Mechatronics
//       </motion.h5>
//     ),
//   },
//   {
//     icon: iot,
//     title: (
//       <motion.h5 className="text-secondary-light font-semibold text-center">
//         Internet of
//         <br />
//         things
//       </motion.h5>
//     ),
//   },
//   {
//     icon: miniMba,
//     title: (
//       <motion.h5 className="text-secondary-light font-semibold text-center">
//         Mini MBA
//         <br />
//       </motion.h5>
//     ),
//   },
// ];

export default function InstDesSteps() {
  return (
    <motion.section className="py-16 lg:my-[3rem] px-[1.5rem] lg:px-[3.25rem] xl:px-[6.25rem]">
      <div className="flex justify-center items-center mb-16">
        <motion.img
          variants={gridVariants}
          initial="hidden"
          whileInView="show"
          viewport={{ once: true, amount: 0.2 }}
          src={spark}
          draggable="false"
          alt="spark"
        />
      </div>
      <div className="flex flex-col gap-y-5 md:flex-row items-center md:justify-around">
        {/* {steps.map((step, index) => (
        <>
          <motion.div
            key={index}
            variants={gridVariants}
            initial="hidden"
            whileInView="show"
            viewport={{ once: true }}
            className="flex flex-col items-center space-y-2"
          >
            <motion.img src={step.icon} alt={'step-' + index + 1} />
            {step.title}
          </motion.div>
          {index < 4 && (
            <div key={index + 10}>
              <ArrowRight
                size={28}
                className="text-primary rotate-90 md:rotate-0"
              />
            </div>
          )}
        </>
      ))} */}

        <div className="flex flex-col items-center space-y-2">
          <motion.img
          draggable="false"
            variants={gridVariants}
            initial="hidden"
            whileInView="show"
            viewport={{ once: true, amount: 0.2 }}
            src={commonTrank}
            alt="common trank"
          />
          <motion.h5
            variants={gridVariants}
            initial="hidden"
            whileInView="show"
            viewport={{ once: true, amount: 0.2 }}
            className="text-secondary-light font-semibold text-center"
          >
            Common trank
          </motion.h5>
        </div>
        <motion.div
          variants={gridVariants}
          initial="hidden"
          whileInView="show"
          viewport={{ once: true, amount: 0.2 }}
        >
          <ArrowRight
            size={28}
            className="text-primary rotate-90 md:rotate-0"
          />
        </motion.div>
        <div className="flex flex-col items-center space-y-2">
          <motion.img
          draggable="false"
            variants={gridVariants}
            initial="hidden"
            whileInView="show"
            viewport={{ once: true, amount: 0.2 }}
            src={softwareEng}
            alt="software eng"
          />
          <motion.h5
            variants={gridVariants}
            initial="hidden"
            whileInView="show"
            viewport={{ once: true, amount: 0.2 }}
            className="text-secondary-light font-semibold text-center"
          >
            Software eng
          </motion.h5>
        </div>
        <motion.div
          variants={gridVariants}
          initial="hidden"
          whileInView="show"
          viewport={{ once: true, amount: 0.2 }}
        >
          <ArrowRight
            size={28}
            className="text-primary rotate-90 md:rotate-0"
          />
        </motion.div>
        <div className="flex flex-col items-center space-y-2">
          <motion.img
          draggable="false"
            variants={gridVariants}
            initial="hidden"
            whileInView="show"
            viewport={{ once: true, amount: 0.2 }}
            src={mechatronics}
            alt="mechatronics"
          />
          <motion.h5
            variants={gridVariants}
            initial="hidden"
            whileInView="show"
            viewport={{ once: true, amount: 0.2 }}
            className="text-secondary-light font-semibold text-center"
          >
            Mechatronics
          </motion.h5>
        </div>
        <motion.div
          variants={gridVariants}
          initial="hidden"
          whileInView="show"
          viewport={{ once: true, amount: 0.2 }}
        >
          <ArrowRight
            size={28}
            className="text-primary rotate-90 md:rotate-0"
          />
        </motion.div>
        <div className="flex flex-col items-center space-y-2">
          <motion.img
          draggable="false"
            variants={gridVariants}
            initial="hidden"
            whileInView="show"
            viewport={{ once: true, amount: 0.2 }}
            src={iot}
            alt="iot"
          />
          <motion.h5
            variants={gridVariants}
            initial="hidden"
            whileInView="show"
            viewport={{ once: true, amount: 0.2 }}
            className="text-secondary-light font-semibold text-center"
          >
            Internet of
            <br />
            things
          </motion.h5>
        </div>
        <motion.div
          variants={gridVariants}
          initial="hidden"
          whileInView="show"
          viewport={{ once: true, amount: 0.2 }}
        >
          <ArrowRight
            size={28}
            className="text-primary rotate-90 md:rotate-0"
          />
        </motion.div>
        <div className="flex flex-col items-center space-y-2">
          <motion.img
          draggable="false"
            variants={gridVariants}
            initial="hidden"
            whileInView="show"
            viewport={{ once: true, amount: 0.2 }}
            src={miniMba}
            alt="mini Mba"
          />
          <motion.h5
            variants={gridVariants}
            initial="hidden"
            whileInView="show"
            viewport={{ once: true, amount: 0.2 }}
            className="text-secondary-light font-semibold text-center"
          >
            Mini MBA
          </motion.h5>
        </div>
      </div>
    </motion.section>
  );
}