import { defineComponent, mergeProps, useSSRContext, computed, withCtx, createVNode } from "vue";
import { ssrRenderAttrs, ssrInterpolate, ssrRenderComponent, ssrRenderStyle, ssrRenderList } from "vue/server-renderer";
import { _ as __nuxt_component_0 } from "./client-only-bjZkSkO2.js";
import { u as useTheme } from "./useTheme-BJEBqOKH.js";
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
  __name: "StatCard",
  __ssrInlineRender: true,
  props: {
    title: {},
    value: {},
    trend: {}
  },
  setup(__props) {
    return (_ctx, _push, _parent, _attrs) => {
      _push(`<section${ssrRenderAttrs(mergeProps({ class: "card p-5 transition hover:-translate-y-0.5 hover:shadow-lg" }, _attrs))}><p class="text-sm text-text-secondary">${ssrInterpolate(__props.title)}</p><div class="mt-3 flex items-end justify-between gap-2"><p class="text-2xl font-semibold">${ssrInterpolate(__props.value)}</p><span class="chip">${ssrInterpolate(__props.trend)}</span></div></section>`);
    };
  }
});
const _sfc_setup$1 = _sfc_main$1.setup;
_sfc_main$1.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/ui/StatCard.vue");
  return _sfc_setup$1 ? _sfc_setup$1(props, ctx) : void 0;
};
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "LineAreaChart",
  __ssrInlineRender: true,
  props: {
    values: {},
    labels: {}
  },
  setup(__props) {
    const props = __props;
    const { isDark } = useTheme();
    computed(() => [
      {
        name: "Productivity",
        data: props.values
      }
    ]);
    computed(() => {
      return {
        chart: {
          type: "area",
          toolbar: { show: false },
          zoom: { enabled: false },
          sparkline: { enabled: false },
          background: isDark.value ? "#0F172A" : "#FFFFFF",
          foreColor: isDark.value ? "#94A3B8" : "#64748B",
          parentHeightOffset: 0,
          animations: { enabled: true, easing: "easeinout", speed: 650 }
        },
        dataLabels: { enabled: false },
        stroke: {
          curve: "smooth",
          width: 3
        },
        colors: ["#4F8CFF"],
        fill: {
          type: "gradient",
          gradient: {
            shadeIntensity: 0.2,
            opacityFrom: 0.36,
            opacityTo: 0.03,
            stops: [0, 100]
          }
        },
        grid: {
          borderColor: isDark.value ? "#334155" : "#E5EEF9",
          strokeDashArray: 4,
          padding: { top: 4, right: 8, bottom: 0, left: 8 },
          xaxis: { lines: { show: false } }
        },
        xaxis: {
          categories: props.labels,
          labels: { show: false },
          axisBorder: { show: false },
          axisTicks: { show: false }
        },
        yaxis: {
          labels: { show: false }
        },
        tooltip: {
          theme: isDark.value ? "dark" : "light"
        },
        theme: {
          mode: isDark.value ? "dark" : "light",
          monochrome: { enabled: false }
        },
        legend: { show: false }
      };
    });
    return (_ctx, _push, _parent, _attrs) => {
      const _component_ClientOnly = __nuxt_component_0;
      _push(`<div${ssrRenderAttrs(mergeProps({ class: "rounded-xl border border-surface-border bg-white p-3 dark:bg-slate-900/60" }, _attrs))}>`);
      _push(ssrRenderComponent(_component_ClientOnly, null, {
        fallback: withCtx((_, _push2, _parent2, _scopeId) => {
          if (_push2) {
            _push2(`<div class="h-[220px] animate-pulse rounded-lg bg-brand-50 dark:bg-slate-800"${_scopeId}></div>`);
          } else {
            return [
              createVNode("div", { class: "h-[220px] animate-pulse rounded-lg bg-brand-50 dark:bg-slate-800" })
            ];
          }
        })
      }, _parent));
      _push(`<div class="mt-1 grid gap-1 text-center text-[11px] text-text-secondary" style="${ssrRenderStyle({ gridTemplateColumns: `repeat(${__props.labels.length}, minmax(0, 1fr))` })}"><!--[-->`);
      ssrRenderList(__props.labels, (label) => {
        _push(`<span>${ssrInterpolate(label)}</span>`);
      });
      _push(`<!--]--></div></div>`);
    };
  }
});
const _sfc_setup = _sfc_main.setup;
_sfc_main.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/ui/LineAreaChart.vue");
  return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
};
export {
  _sfc_main$1 as _,
  _sfc_main as a
};
//# sourceMappingURL=LineAreaChart-BKRLleJI.js.map
