/* 
  This is the service card component.
  It contains the following components:
  - ServiceCard
*/
import { SERVICE_CARD_DATA_ITEM } from '@/src/types/StaticContent/home.content.type';
import Image from 'next/image';
import React from 'react';
import styles from './ServiceCard.module.scss';

// Define the props type for the ServiceCard component
interface ServiceCardProps {
  CardContent: SERVICE_CARD_DATA_ITEM;
}

const ServiceCard: React.FC<ServiceCardProps> = ({ CardContent }) => {
  return (
    <>
      <div className={`${styles.ServiceCardWrapper} relative flex flex-col gap-3 justify-center items-center mt-10 xl:mt-10 xxl:mt-18`}>
        <div className={`bg-bgColor absolute top-[-40px] xl:top-[-50px] xxl:top-[-60px] xxxl:top-[-68px] flex items-center justify-center rounded-full w-[70px] h-[70px] sm:w-[70px] sm:h-[70px] xl:w-[80px] xl:h-[80px] xxl:w-[90px] xxl:h-[90px] xxxl:w-[100px] xxxl:h-[100px] mb-[-47px]`}>
          <Image width={100} height={100} src={CardContent.SERVICE_ICON} alt='service-icon' className={`w-[25px] h-[25px] sm:w-[28px] sm:h-[28px] lg:w-[38px] lg:h-[38px] xxl:w-[42px] xxl:h-[42px] xxxl:w-[46px] xxxl:h-[46px]`} />
        </div>
        <div className={`${styles.ServiceCardContent} relative text-center px-3.5 sm:px-5 xl:px-7 xxl:px-9 pb-5 sm:pb-5 md:pb-7 xl:pb-9 pt-12 sm:pt-10 xl:pt-14`}>
          <h5 className={`!mb-3 sm:!mb-3.5`}>{CardContent.SERVICE_TITLE}</h5>
          <p className={`!mb-0 text-grey475Color fs-18 !text-center`}>{CardContent.SERVICE_DESCRIPTION}</p>
        </div>
      </div>
    </>
  )
}

export default ServiceCard