---
import { FaGear, FaMicrochip, FaCode } from "react-icons/fa6";
import { LuBrainCircuit } from "react-icons/lu";
const {title, list}=Astro.props;
---

<div class="px-[10%] relative flex flex-col justify-center items-center w-[20vw] h-[43vh] bg-gradient-to-b from-ieee-blue-100/25 to-ieee-black backdrop-blur rounded-[2vw] border-white/40 border-[0.1vw]">
    <p class="text-[1.5vw] mb-[10%] font-semibold pt-[10%]">
        {title}
    </p>
    <ul class="text-[1vw] font-light">
        {list.map((item)=>(
            <li>&#8226; {item}</li>
         ))}
    </ul>
    <div class="-top-[10%] w-fit p-[5%] shadow-ieee-blue-300 text-[3.2vw] bg-gradient-to-b from-ieee-blue-100 to-ieee-blue-300 rounded-full absolute">
        {title==="Mechanical" && <FaGear />}
        {title==="Electrical" && <FaMicrochip />}
        {title==="AI" && <LuBrainCircuit />}
        {title==="Embedded" && <FaCode />}
    </div>
</div>