"use client";
import { jsx, jsxs } from "../../packages/jsx/src/jsx-runtime.js";
import { Flex } from "theme-ui";
import { Text } from "../../atoms/Text/Text.js";
import { Spacing } from "../../tokens/Spacing.js";
import { FontFamily } from "../../tokens/FontFamily.js";
const TrendingPercentLabel = ({ trendingPercent }) => {
  if (!trendingPercent) {
    return null;
  }
  const percent = trendingPercent * 100;
  const trendingDown = percent < 0;
  const trendingMarker = trendingDown ? "-" : "+";
  const label = `${trendingMarker}${Math.abs(percent).toFixed(0)}%`;
  return /* @__PURE__ */ jsx(Text.C10, { color: trendingDown ? "Red" : "Green", children: label });
};
const ChartKPI = ({
  kpi,
  label,
  timeframeLabel,
  total,
  currency = "GRT",
  trendingPercent,
  active,
  handleKpiSelect
}) => /* @__PURE__ */ jsx(
  "button",
  {
    sx: {
      mr: Spacing["32px"],
      py: Spacing["12px"],
      backgroundColor: "transparent",
      fontFamily: FontFamily.DEFAULT,
      border: "none",
      borderBottom: active ? "Purple" : "transparent",
      boxShadow: "none",
      "&:hover": {
        borderBottom: "Purple",
        cursor: "pointer"
      }
    },
    onClick: () => handleKpiSelect == null ? void 0 : handleKpiSelect(kpi),
    children: /* @__PURE__ */ jsxs(Flex, { sx: { alignSelf: "flex-start", flexDirection: "column", alignItems: "flex-start" }, children: [
      /* @__PURE__ */ jsxs(Text.C10, { color: active ? "Text" : "White64", children: [
        label,
        timeframeLabel ? /* @__PURE__ */ jsxs("span", { children: [
          "⬩",
          timeframeLabel
        ] }) : null
      ] }),
      /* @__PURE__ */ jsxs(Flex, { sx: { flexDirection: "row", alignItems: "center", columnGap: Spacing["8px"] }, children: [
        /* @__PURE__ */ jsx(Text.P24, { color: active ? "Text" : "White64", children: total }),
        /* @__PURE__ */ jsx(Text.C10, { color: active ? "Text" : "White64", children: currency }),
        /* @__PURE__ */ jsx(TrendingPercentLabel, { trendingPercent })
      ] })
    ] })
  }
);
export {
  ChartKPI
};
