import Image from "next/image";
import DataLink from "@/components/common/DataLink";
import type { CRMCompareCell } from "@/data/crmPlanPricing";
import {
  crmCompareAssets,
  crmCompareHeader,
  crmComparePlans,
  crmCompareRows,
} from "@/data/crmPlanPricing";

function cellBoxClass(cell: CRMCompareCell) {
  const v3 =
    (cell.kind === "text" || cell.kind === "icon") && cell.cellVariant === "v3";
  return v3 ? "price-box3-two v3" : "price-box3-two";
}

function CompareCell({ cell }: { cell: CRMCompareCell }) {
  const boxClass = cellBoxClass(cell);

  if (cell.kind === "text") {
    return (
      <div className={boxClass}>
        <h4 className="title">{cell.text}</h4>
      </div>
    );
  }

  if (cell.kind === "icon") {
    const src =
      cell.state === "included"
        ? crmCompareAssets.checkIcon
        : crmCompareAssets.crossIcon;
    const alt =
      cell.state === "included"
        ? crmCompareAssets.checkAlt
        : crmCompareAssets.crossAlt;
    return (
      <div className={boxClass}>
        <Image src={src} alt={alt} width={18} height={18} />
      </div>
    );
  }

  return (
    <div className={boxClass}>
      <DataLink href={cell.href} className={`btn-style1 ${cell.btnClass}`}>
        {cell.label}
        <span>
          <Image
            src={crmCompareAssets.arrowIcon}
            alt={crmCompareAssets.arrowAlt}
            width={14}
            height={14}
          />
        </span>
      </DataLink>
    </div>
  );
}

const CRMPlanPricing = () => {
  return (
    <>
      <div className="price-row">
        <div className="pricing-compare-content">
          <h3 className="title">{crmCompareHeader.title}</h3>
          <p>{crmCompareHeader.subtitle}</p>
        </div>
        <div className="info-box">
          {crmComparePlans.map((plan) => (
            <div key={plan.id} className="price-box3">
              <span className="sub-title">{plan.name}</span>
              <h3 className="price">
                {plan.priceAmount}
                <span>{plan.pricePeriod}</span>
              </h3>
            </div>
          ))}
        </div>
      </div>
      {crmCompareRows.map((row) => (
        <div
          key={row.id}
          className={row.rowVariant === "v2" ? "price-row2 v2" : "price-row2"}
        >
          <div
            className={
              row.titleCellVariant === "v2" ? "price-title v2" : "price-title"
            }
          >
            {row.featureTitle ? (
              <h4 className="title">{row.featureTitle}</h4>
            ) : null}
          </div>
          <div
            className={row.infoBoxVariant === "v2" ? "info-box v2" : "info-box"}
          >
            {row.cells.map((cell, index) => (
              <CompareCell key={`${row.id}-${index}`} cell={cell} />
            ))}
          </div>
        </div>
      ))}
    </>
  );
};

export default CRMPlanPricing;