import Link from "next/link";
import SafeHtmlRenderer from "../SafeHtmlRenderer";

const CategoryCard = ({ data }: any) => {
  return (
    <div className="flex flex-col rounded-2xl p-8 shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300">
      <div className="flex-grow">
        <div className="flex items-center gap-4 mb-6">
          <h3 className="text-2xl font-bold text-gray-800">{data?.title}</h3>
        </div>
        <div className="safe">
          <SafeHtmlRenderer htmlContent={data?.content} />
        </div>
      </div>
      <div className="mt-10 flex rounded-lg md:w-[70%]  bg-btn p-0.5 shadow-lg rgb-button will-change-transform">
        <Link
          href={`/members/${data?._id}`}
          className="flex-1 font-normal text-md bg-white/90 px-6 py-3 hover:scale-105 rounded-lg  hover:-translate-y-2 transition duration-500 items-center flex justify-center hover:shadow-md will-change"
        >
          <button className="flex items-center will-change">
            <span className="will-change-transform">Read More</span>
          </button>
        </Link>
      </div>
    </div>
  );
};

export default function CertificationValidation({ data }: any) {
  return (
    <div className="min-h-screen py-7 px-4">
      <div className="max-w-7xl mx-auto">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {data &&
            data?.members?.map((d: any, index: any) => (
              <CategoryCard key={index} data={d} />
            ))}
        </div>
      </div>
    </div>
  );
}