---
import about from "../../images/about.png";
import { Image } from "astro:assets";
import neko from "../../images/neko.png";
import { LiaDotCircle } from "react-icons/lia";
import Officer from "../board/Officer.astro";
import Filter from "../board/Filter.astro";
import officers from "../../data/officers.json";

// Get all unique types and add 'All' option
const typeOrder = ["Executives", "Internal", "Events", "Projects"];
const types = ["All", ...typeOrder];

const currentFilter = "All";
---

<div
    class="text-white flex flex-col items-center md:mt-[10vw] mt-[20vw] mb-[10vh]"
>
    <div
        data-inview
        class="relative w-[40vw] md:w-[21vw] mb-[10vh] in-view:animate-fade-down"
    >
        <Image src={about} alt="About background image" />
        <Image
            src={neko}
            alt="About image"
            class="absolute top-[10%] left-[16%] aspect-[399/491] object-cover w-[27vw] md:ww-[14vw] rounded-[2vw]"
        />
    </div>

    <div class="text-[5vw] md:text-[2.5vw] flex items-center mt-[2vh]">
        <LiaDotCircle className="mr-[1vw] pt-[0.5%]" />
        <p>MEET THE BOARD</p>
    </div>

    <p
        class="md:text-[1.3vw] text-[2.5vw] md:w-[56%] w-[70%] my-[3%] font-extralight text-center"
    >
        Our board comprises 31 students of varying majors, colleges, and
        interests! Feel free to reach out for any questions about our position
        or experiences.
    </p>

    <Filter filters={types} currentFilter={currentFilter} />

    <div class="grid gap-[3vw] md:grid-cols-3 grid-cols-2 mt-[2vh]">
        {
            officers.map((officer) => (
                <div
                    data-officer
                    data-types={JSON.stringify(officer.type)}
                    style="opacity: 0; visibility: hidden"
                >
                    <Officer
                        name={officer.name}
                        position={officer.position}
                        picture={officer.picture}
                        email={officer.email}
                    />
                </div>
            ))
        }
    </div>
</div>