/**
 * @author : Multiqos
 * File: WorkBaseSection.tsx
 * Description: This file contains the WorkBaseSection component, which displays a list of work base items.
 * It renders the title, deluxe info, location label, and a grid of work base items.
 * It also handles navigation to the list a home page.
 */
import React from "react";
import styles from "./WorkBaseSection.module.scss"

// Interface for each work base item (e.g., Monitor, Desk, Chair)
interface WorkBaseItem {
  icon: string;
  label: string;
}

// Interface for the work base section data
interface WorkBaseData {
  title: string;
  deluxeInfo?: {
    label: string;
    description: string;
  };
  locationLabel?: string;
  items: WorkBaseItem[];
}

// Props interface for the WorkBaseSection component
interface WorkBaseSectionProps {
  type?: number;
  data: WorkBaseData;
}
const WorkBaseSection: React.FC<WorkBaseSectionProps> = ({ type, data }) => {

  return (
    <>
      <div className="WorkBaseSection mb-6">
        <div className="titleWraper flex items-center gap-2 justify-between mb-4">
          <h6 className="!mb-0 !font-fw600">{data.title}</h6>
        </div>

        {/* Deluxe and Location Info (only for type 1) */}
        {type === 1 && data.deluxeInfo && (
          <div className={`${styles.deluxeBox} flex flex-wrap gap-3 mb-4`}>
            <span className={`${styles.singleWorkBox} ${styles.deluxeSpan} flex justify-center items-center gap-1.5 rounded-[200px] py-1.5 px-4`}>
              <p className="fs-14 !mb-0 !font-medium">{data.deluxeInfo.label}</p>
              <div className="tooltipMainBox">
                <span className="tooltipSpan !inline-flex items-center justify-center">
                  <i className="Icon IconInfo !w-[16px] !h-[16px]"></i>
                </span>
                <div className="hiddenTooltip orangetooltip max-w-[260px] sm:max-w-[300px]">
                  <p className="fs-16"><b>{data.deluxeInfo.label}</b></p>
                  <p className="tooltipDescription">{data.deluxeInfo.description}</p>
                </div>
              </div>
            </span>
            <span className={`${styles.singleWorkBox} flex  justify-center items-center gap-2 rounded-[200px] p-2`}>
              <i className={`Icon IconLocation w-[20px] h-[20px]`}></i>
              <p className="fs-14 !mb-0 !font-medium">{data.locationLabel}</p>
            </span>
          </div>
        )}

        {/* Work Items Grid */}
        {data.items.length === 5 ? (
          <>
            {/* First row: 2 items (50% each) */}
            <div className={`grid grid-cols-2 gap-3 ${styles.workBaseBoxes}`}>
              {data.items.slice(0, 2).map((item, index) => (
                <span
                  key={index}
                  className={`${styles.singleWorkBox} flex flex-col sm:flex-row justify-center items-center gap-2 rounded-[14px] sm:rounded-[200px] p-2`}
                >
                  <i className={`Icon ${item.icon} w-[20px] h-[20px]`}></i>
                  <p className="fs-14 mb-0 !font-normal !text-center px-4 md:px-0">{item.label}</p>
                </span>
              ))}
            </div>

            {/* Second row: 3 items (33.33% each) */}
            <div className={`grid grid-cols-2 md:grid-cols-3 gap-3 mt-3`}>
              {data.items.slice(2).map((item, index) => (
                <span
                  key={index + 2}
                  className={`${styles.singleWorkBox} flex flex-col sm:flex-row justify-center items-center gap-2 rounded-[14px] sm:rounded-[200px] p-2`}
                >
                  <i className={`Icon ${item.icon} w-[20px] h-[20px]`}></i>
                  <p className="fs-14 mb-0 !font-normal !text-center px-4 md:px-0">{item.label}</p>
                </span>
              ))}
            </div>
          </>
        ) : data.items.length === 4 ? (
          <div className={`grid grid-cols-2 gap-3 ${styles.workBaseBoxes}`}>
            {data.items.map((item, index) => (
              <span
                key={index}
                className={`${styles.singleWorkBox} flex flex-col sm:flex-row justify-center items-center gap-2 rounded-[14px] sm:rounded-[200px] p-2`}
              >
                <i className={`Icon ${item.icon} w-[20px] h-[20px]`}></i>
                <p className="fs-14 mb-0 !font-normal !text-center px-4 md:px-0">{item.label}</p>
              </span>
            ))}
          </div>
        ) : (
          <div
            className={`grid ${type === 1
                ? 'grid-cols-2 xsm:grid-cols-3 md:grid-cols-5'
                : type === 2
                  ? 'grid-cols-2'
                  : 'grid-cols-1'
              } gap-3 ${styles.workBaseBoxes}`}
          >
            {data.items.map((item, index) => (
              <span
                key={index}
                className={`${styles.singleWorkBox} flex flex-col sm:flex-row justify-center items-center gap-2 rounded-[14px] sm:rounded-[200px] p-2`}
              >
                <i className={`Icon ${item.icon} w-[20px] h-[20px]`}></i>
                <p className="fs-14 mb-0 !font-normal !text-center px-4 md:px-0">{item.label}</p>
              </span>
            ))}
          </div>
        )}

      </div>
    </>
  );
};

export default WorkBaseSection;