/* The SelectAmenities component displays a list of Amenities. */
import React from "react";

interface AmenityItem {
  title: string;
  // iconClassName: string;
}

// Define the props type
interface SelectAmenitiesProps {
  Content: AmenityItem[];
}
const SelectAmenities: React.FC<SelectAmenitiesProps> = ({ Content }) => {
  return (
    <>
      {/* Workspace list wrapper */}
      <div className={`boxWrapper amenitiesfilter`}>
        {/* title wrapper */}
        <div className={`titleWrapper`}>
          <h6>Workspace</h6>
        </div>
        <ul className={`grid grid-cols-1 xxl:grid-cols-2 gap-x-2.5 gap-y-2.5 xxl:gap-y-4`}>
          {Content?.map((items, i) => {
            return (
              <React.Fragment key={i}>
                <li>
                  <label htmlFor={items?.title} className="CommonCheckbox CheckBoxBG cursor-pointer line-clamp-1">
                    <input type="checkbox" id={items?.title} />
                    <span className="flex items-center gap-x-[6px] text-grey85">
                      {/* <i className={`!bg-secondaryColor Icon min-w-[16px] w-full max-w-[16px] h-[16px] ${items?.iconClassName}`}></i> */}
                      {items?.title}
                    </span>
                  </label>
                </li>
              </React.Fragment>
            )
          })}

        </ul>
      </div>
    </>
  );
};

export default SelectAmenities;