import Link from "next/link"

export const ComponentItemDetails = ({ isLoading, className, onClick, icon, title, description }: { isLoading?: boolean, className?: string, onClick: any, icon: any, title: string, description: string }) => {
    return (
        <div onClick={onClick} className={`${className} cursor-pointer  w-full px-8 py-11 bg-white hover:bg-primary hover:text-white rounded-[32px] border border-zinc-300 flex-col justify-between items-center inline-flex hover:scale-105 transform text-black`} >
            <div>
                {icon}
            </div>
            <div className="text-center  text-opacity-90 text-[28px] font-semibold font-['Alexandria'] leading-[42px]">
                {title}
            </div>
            <div className="text-center  text-opacity-60 text-lg font-normal font-['Alexandria'] leading-[27px]">
                {description}
            </div>
            {isLoading && <div className="loaderDots" />}
            {isLoading && <div className="loaderDotsWhite" />}
        </div>
    )
}