"use client";
import { jsxs as r, jsx as a } from "react/jsx-runtime";
import { useState as v } from "react";
import { EIconName as n } from "../../../../components/Icon/constants.es.js";
import { cn as d } from "../../../../utils/cn/cn.es.js";
import u from "../../assets/company-logo.svg.es.js";
import e from "../../../../modules/Comparison/components/ComparisonMobileView/comparisonMobileView.module.css";
import { FilterMenu as f } from "../../../../components/FilterMenu/FilterMenu.es.js";
import { Typography as c } from "../../../../components/Typography/Typography.es.js";
import { Icon as p } from "../../../../components/Icon/Icon.es.js";
const o = (l) => l ? l.type === "string" ? /* @__PURE__ */ a(c, { defaultVariant: "bodyMd", as: "div", children: l.value }) : /* @__PURE__ */ a("div", { className: d(e.iconCell, l.value ? e.iconCellHighlighted : ""), children: /* @__PURE__ */ a(p, { name: l.value ? n.CHECK : n.CLOSE, className: e.icon }) }) : null, g = (l) => l.slice(1).map((t, i) => ({
  values: [{ value: i + 1, label: t }]
})), H = ({ comparison: l, className: t }) => {
  const [i, m] = v(1);
  return /* @__PURE__ */ r("div", { className: d(e.root, t), children: [
    l.headers.length > 2 && /* @__PURE__ */ a("div", { children: /* @__PURE__ */ a(
      f,
      {
        options: g(l.headers),
        label: "Select comparison",
        selectedValue: i,
        onSelect: m
      }
    ) }),
    /* @__PURE__ */ r("div", { className: e.table, children: [
      /* @__PURE__ */ r("div", { className: e.headers, children: [
        /* @__PURE__ */ a("div", { className: d(e.cell, e.cellHighlighted), children: /* @__PURE__ */ a(u, { className: e.companyLogo }) }),
        /* @__PURE__ */ a(c, { as: "div", defaultVariant: "bodyXl", className: e.cell, children: l.headers[i] })
      ] }),
      l.rows.map((s, h) => /* @__PURE__ */ r("div", { className: e.feature, children: [
        /* @__PURE__ */ a(c, { defaultVariant: "bodyLg", as: "div", weight: "medium", children: s.feature }),
        /* @__PURE__ */ r("div", { className: e.row, children: [
          /* @__PURE__ */ a("div", { className: e.cell, children: o(s.values[0]) }),
          /* @__PURE__ */ a("div", { className: e.cell, children: o(s.values[i]) })
        ] })
      ] }, `feature-${h}`))
    ] })
  ] });
};
export {
  H as ComparisonMobileView
};
