import React from "react";

interface ProjectFeatureProps {
  icon: string;
  value: string;
  label?: string;
  isAmenityCard?: boolean;
  extraClassName?: string;
}

const ProjectFeature = ({
  icon,
  label,
  value,
  isAmenityCard,
  extraClassName = "",
}: ProjectFeatureProps) => {
  return (
    <div
      className={`w-full md:w-72 lg:w-56 xl:w-56 2xl:w-72 flex 2xl:min-h-52 flex-col gap-2 md:gap-2.5 md:pt-14 even:bg-[#F5F5F5] bg-[#FAFAFA] shadow-sm ${extraClassName} ${
        isAmenityCard
          ? "pl-0 items-center space-y-2.5"
          : "p-3 pr-2 md:p-4 md:pl-10"
      }`}
    >
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img
        src={icon}
        alt={label || value}
        className="w-8 md:w-10 h-8 md:h-10"
      />
      {label && (
        <p className="text-xs md:text-sm font-normal text-[#28241E] truncate w-full">
          {label}
        </p>
      )}
      <h4
        className={`text-xs md:text-lg font-medium md:font-normal text-[#28241E] truncate w-full ${
          isAmenityCard ? "text-center" : ""
        }`}
      >
        {value}
      </h4>
    </div>
  );
};

export default ProjectFeature;