import clsx from "clsx";
import React from "react";

interface ComunityCardProps {
  icon: React.ReactNode;
  number: string;
  text: string;
  className?: string;
}

export default function ComunityCard({
  icon,
  number,
  text,
  className,
}: ComunityCardProps) {
  return (
    <div
      className={clsx(
        "flex flex-col justify-between text-[#324D43] bg-[#F0EDE6] 2xl:rounded-[1.111vw] md:rounded-[2.083vw] rounded-[4.444vw] 2xl:p-[1.389vw] 2xl:gap-[2.222vw] md:gap-[4.167vw] gap-[6.667vw] md:p-[2.604vw] p-[4.444vw]",
        className
      )}
    >
      <span className="2xl:size-[2.778vw] md:size-[5.208vw] size-[6.667vw] flex">
        {icon}
      </span>
      <div className="flex flex-col 2xl:gap-[0.556vw] md:gap-[1.042vw] gap-[2.222vw]">
        <span className="2xl:number md:number h3 [font-family:New_York_Large] font-medium">
          {number}
        </span>
        <p className="2xl:text-s md:text-s caption font-[Poppins] font-medium max-md:max-w-[90%]">
          {text}
        </p>
      </div>
    </div>
  );
}
