---
import Link from "next/link";
import { GoArrowDownRight } from "react-icons/go";
import { FaGear } from "react-icons/fa6";
import { IoMdCalendar } from "react-icons/io";
import { RiRobot2Fill } from "react-icons/ri";
const {image, text, link, delay} = Astro.props;
---
<div data-inview class={` animate-ease-in-out md:w-[15vw] w-[24vw] relative group in-view:animate-fade-up animate-delay-${delay} animate-duration-1000`}>

    <img src={image} alt="involvement background" class="opacity-70 aspect-[230/425] object-cover rounded-[2vw] group-hover:opacity-50 duration-300"/>
    <Link 
        href={link}
        target={text==="H.A.R.D. HACK"? "_blank":"_self"} 
        className="absolute top-0 md:w-[15vw] w-[25vw] pt-[5%] aspect-[230/425] flex flex-col justify-between"
    >
        <div class="w-full flex justify-end md:pr-[5%] pr-[2vw]">
            <div class="bg-white w-fit rounded-full aspect-square p-[0.5vw] text-ieee-black text-[4.5vw] md:text-[2vw]">
                {
                    text === "PROJECTS"? <RiRobot2Fill/>:
                    text === "EVENTS"? <IoMdCalendar/>:
                    <FaGear/>
                }
            </div>
        </div>
    
        <div class="px-[3%] text-white w-full bg-gradient-to-t from-black via-black to-transparent rounded-b-[2vw] pt-[20vw] pb-[3vw] md:pt-[30%] md:pb-[5%]">
            <div class="text-[2vw] md:text-[1.1vw] duration-300 flex w-full px-[3%] justify-between items-end">
                <p class="pt-[3%] pb-[2%] px-[10%] border-[0.1vw] border-white rounded-full group-hover:text-ieee-yellow group-hover:border-ieee-yellow duration-300 font-light">
                    {text}
                </p>
                <GoArrowDownRight className="text-[5vw] md:text-[3vw] leading-none group-hover:text-ieee-yellow"/>
            </div>
    
            {text === "H.A.R.D. HACK" &&
                <p class="text-[1.8vw] md:text-[1vw] text-center pt-[10%] group-hover:text-ieee-yellow duration-300">
                    UC San Diego’s largest
                    hardware focused hackathon
                    hold by IEEE UCSD, HKN, and TNT
                </p>
            }
        </div>
    </Link>
</div>
