/* 
  This is the everything you need component for the home page.
*/
import ServiceCard from '@/src/components/ServiceCard';
import { EVERYTHING_YOU_NEED, SERVICE_CARD_DATA_ITEM } from '@/src/types/StaticContent/home.content.type';
import ImagesConstants from '@/src/utils/ImagesConstants';
import React from 'react';
import styles from './EverythingYouNeed.module.scss';

// Define the static content type for the EverythingYouNeed component
type IconKey = 'wifi' | 'workspace' | 'stay';
type IconType = Record<IconKey, string>;

interface EverythingYouNeedProps {
  EverythingYouNeed: EVERYTHING_YOU_NEED;
}

const EverythingYouNeed: React.FC<EverythingYouNeedProps> = ({ EverythingYouNeed }) => {

  const ICON: IconType = {
    wifi: ImagesConstants.WIFI_ICON,
    workspace: ImagesConstants.WORKING_SPACE_ICON,
    stay: ImagesConstants.STAY_HOME_ICON,
  }

  // EverythingYouNeedData
  const EverythingYouNeedData = {
    title: EverythingYouNeed.TITLE,
    description: EverythingYouNeed.DESCRIPTION,
    serviceCardData: EverythingYouNeed?.SERVICE_CARD_DATA?.map((item: { SERVICE_ICON: IconKey; SERVICE_TITLE: string; SERVICE_DESCRIPTION: string; }) => ({
      SERVICE_ICON: ICON[item.SERVICE_ICON],
      SERVICE_TITLE: item.SERVICE_TITLE,
      SERVICE_DESCRIPTION: item.SERVICE_DESCRIPTION,
    })),
  };

  return (
    <>
      <section className={`${styles.EverythingYouNeedWrapper} my-[30px] sm:my-[40px] md:my-[50px] xl:my-[60px] xxl:my-[80px] xxxl:my-[100px]`}>
        <div className={`container`}>
          <div className={`text-center m-auto max-w-[600px] xl:max-w-[700px] xxl:max-w-[800px]`}>
            <h2 className={`mb-2.5 sm:mb-3.5`}>{EverythingYouNeedData.title}</h2>
            <p className={`!mb-0 text-grey475Color fs-18 !text-center`}>{EverythingYouNeedData.description}</p>
          </div>

          {/* Service cards Start */}
          <div className={`grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 md:gap-6 xxl:gap-8 mt-5 sm:mt-7 lg:mt-9 xl:mt-16 xxxl:mt-18`}>
            {EverythingYouNeedData?.serviceCardData?.map((serviceCardItem: SERVICE_CARD_DATA_ITEM, serviceKey: number) => {
              return (
                <ServiceCard key={serviceKey} CardContent={serviceCardItem} />
              )
            })}
          </div>
          {/* Service cards End */}
        </div>
      </section>
    </>
  )
}

export default EverythingYouNeed