---
import Activity from "./Activity.astro";
import activities from "../../data/activities.json"
import { LiaDotCircle } from "react-icons/lia";
---

<div class="flex flex-col items-center md:h-[50vw] justify-between text-white md:my-[10vw] my-[20vw]">
    <div class="flex items-center text-[4.5vw] md:text-[2.5vw]">
        <LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/>
        <p>
            Events & Projects
        </p>
    </div>

    <p class="md:w-1/3 w-3/5 text-center text-[2vw] md:text-[1.2vw] pb-[5%] my-[8vw] md:my-0">
        Your involvement in IEEE @ UCSD can be tailored to your professional goals, interests, and quarterly schedules.
    </p>

    <div class="md:flex justify-evenly md:w-[90%] grid grid-cols-2 gap-[5vw] md:gap-0">
        {activities.map((activity) => (
            <Activity 
                title={activity.title} 
                text={activity.text}
                link={activity.link}
                number={activity.number}
                delay={activity.delay}
            />
        ))}
    </div>
</div>