"use client";
import { ImageDown } from "lucide-react";

const AccreditationsLoading = () => {
    return (
        <>
            {
                [...Array(8)].map((_, i: number) => (
                    <div
                        key={i}
                        className="bg-white border border-gray-300 w-full overflow-hidden p-0 rounded-xl my-3 mx-1 flex flex-col justify-between items-center"
                    >
                        <div className="w-full h-32 bg-gray-200 rounded-b-full relative overflow-hidden">
                        </div>

                        {/* Image */}
                        <div className="w-40 h-40 -mt-20 mb-4 relative z-10 bg-white rounded-full flex justify-center items-center l-load text-gray-500">
                            <ImageDown size={30} />
                        </div>

                        {/* Title */}
                        <div className="mb-4 h-6 l-load-dt w-28 rounded-lg capitalize"></div>

                        {/* Show More Button */}
                        <div className="px-4 pb-4 w-full">
                            <button
                                className="w-full l-load-dt py-6 rounded-lg"
                            >
                            </button>
                        </div>
                    </div>
                ))
            }
        </>
    )
}
export default AccreditationsLoading;