import clsx from "clsx";

interface AmentitiesCardProps {
  icon?: React.ReactNode;
  title: string;
}

function AmentitiesBadge({ icon, title }: AmentitiesCardProps) {
  return (
    <div
      className={clsx(
        "2xl:space-y-[0.883vw] space-y-3",
        !icon &&
          "2xl:px-[1.111vw] 2xl:py-[0.417vw] px-4 py-1.5 2xl:rounded-[2.778vw] rounded-[40px] 2xl:ring-[0.069vw] ring ring-[#E2E2DC]"
      )}
    >
      {icon && (
        <div className="2xl:size-[2.778vw] size-10 text-[#0D1922] rounded-full overflow-hidden 2xl:ring-[0.069vw] ring ring-[#E2E2DC]">
          {icon}
        </div>
      )}
      <p className="max-md:text-caption-s text-caption-m">{title}</p>
    </div>
  );
}
export default AmentitiesBadge;