import styles from './AmenitiesCards.module.scss';

const AmenitiesCards = ({ item, count, title }: { item: any, count: number, title?: string }) => {
  return (
    <>
      <div className={`${styles.AmenitiesCardsWrapper}`}>
        <div className={`${styles.CardHeader} bg-secondary rotate-180 m-auto -mt-px py-2 px-4 lg:py-2.5 lg:px-5`}>
          <div className="rotate-180 flex gap-1.5 items-center justify-center">
            <span className="fs-16 !font-fw600">{title} {count}</span>
          </div>
        </div>
        <div className={`${styles.CardContent}`}>
          <ul className={`${styles.verticalList}`}>
            {item?.allAmenitiesData?.length === 0 && <p className="flex justify-center">No Amenities available</p>}
            {item?.allAmenitiesData?.length > 0 && item?.allAmenitiesData?.map((item: any, index: number) => (
              <li key={index}>{item?.title}</li>
            ))
            }
          </ul>
        </div>
      </div>
    </>
  );
};

export default AmenitiesCards;