let albumsData = [
    {
        id : "1",
        type : "Art & Craft Album",
        img : "/assets/athumbnail1.jpg",
        url : "/albums/art-&-craft"
    },
    {
        id : "2",
        type : "GK & Group Activity",
        img : "/assets/athumbnail2.jpg",
        url : "/albums/gk-&-group-activity"
    },
    {
        id : "3",
        type : "Language & Maths",
        img : "/assets/athumbnail3.jpg",
        url : "/albums/language-&-maths"
    }
]


export default function AlbumIndex(){
    return(
        <div>
            <section className="container mx-auto px-4">
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 p-8">
                    {
                        albumsData.map((data) => (
                            <a href={data.url} key={data.id} className="rounded-[10px] border-[1px] border-[#D4D4D4] relative inline-block">
                                <img className="w-full rounded-[10px]" src={data.img} alt="" />
                                <h2 className="absolute bottom-6 left-6 text-[24px] font-[700] text-[#FFF] underline">{data.type}</h2>
                            </a>
                        ))
                    }
                    <div></div>
                </div>
            </section>
        </div>
    )
}