"use client";
'use strict';

var React = require('react');
var clsx = require('clsx');
var tailwindMerge = require('tailwind-merge');
var reactSlot = require('@radix-ui/react-slot');
var classVarianceAuthority = require('class-variance-authority');
var jsxRuntime = require('react/jsx-runtime');
var TabsPrimitive = require('@radix-ui/react-tabs');

function _interopNamespace(e) {
  if (e && e.__esModule) return e;
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(n, k, d.get ? d : {
          enumerable: true,
          get: function () { return e[k]; }
        });
      }
    });
  }
  n.default = e;
  return Object.freeze(n);
}

var React__namespace = /*#__PURE__*/_interopNamespace(React);
var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);

// components/blocks/stats/stats-circular-progress.tsx
function cn(...inputs) {
  return tailwindMerge.twMerge(clsx.clsx(inputs));
}
var badgeVariants = classVarianceAuthority.cva(
  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
  {
    variants: {
      variant: {
        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
        destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
      }
    },
    defaultVariants: {
      variant: "default"
    }
  }
);
function Badge({
  className,
  variant,
  asChild = false,
  ...props
}) {
  const Comp = asChild ? reactSlot.Slot : "span";
  return /* @__PURE__ */ jsxRuntime.jsx(
    Comp,
    {
      "data-slot": "badge",
      className: cn(badgeVariants({ variant }), className),
      ...props
    }
  );
}
function Tabs({
  className,
  ...props
}) {
  return /* @__PURE__ */ jsxRuntime.jsx(
    TabsPrimitive__namespace.Root,
    {
      "data-slot": "tabs",
      className: cn("flex flex-col gap-2", className),
      ...props
    }
  );
}
function TabsList({
  className,
  ...props
}) {
  return /* @__PURE__ */ jsxRuntime.jsx(
    TabsPrimitive__namespace.List,
    {
      "data-slot": "tabs-list",
      className: cn(
        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
        className
      ),
      ...props
    }
  );
}
function TabsTrigger({
  className,
  ...props
}) {
  return /* @__PURE__ */ jsxRuntime.jsx(
    TabsPrimitive__namespace.Trigger,
    {
      "data-slot": "tabs-trigger",
      className: cn(
        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className
      ),
      ...props
    }
  );
}
function TabsContent({
  className,
  ...props
}) {
  return /* @__PURE__ */ jsxRuntime.jsx(
    TabsPrimitive__namespace.Content,
    {
      "data-slot": "tabs-content",
      className: cn("flex-1 outline-none", className),
      ...props
    }
  );
}
var defaultCategories = [
  {
    id: "business",
    name: "Business",
    stats: [
      { label: "Revenue Growth", value: 84, suffix: "%", info: "Year over year" },
      { label: "ROI", value: 167, suffix: "%", info: "Return on investment" },
      { label: "Market Share", value: 42, suffix: "%", info: "In primary markets" },
      { label: "Profit Margin", value: 23, suffix: "%", info: "Net margin" }
    ]
  },
  {
    id: "technical",
    name: "Technical",
    stats: [
      { label: "System Uptime", value: 99.97, suffix: "%", info: "Last 30 days" },
      { label: "Load Time", value: 78, suffix: "%", info: "Faster than average" },
      { label: "Code Coverage", value: 91, suffix: "%", info: "Test coverage" },
      { label: "API Performance", value: 88, suffix: "%", info: "Response time" }
    ]
  },
  {
    id: "customer",
    name: "Customer",
    stats: [
      { label: "Satisfaction", value: 94, suffix: "%", info: "Overall rating" },
      { label: "Retention", value: 87, suffix: "%", info: "Customer loyalty" },
      { label: "NPS Score", value: 72, suffix: "", info: "Net promoter score" },
      { label: "Support Rating", value: 96, suffix: "%", info: "Issue resolution" }
    ]
  }
];
function getColorClass(value) {
  if (value >= 90) return "text-emerald-500";
  if (value >= 75) return "text-blue-500";
  if (value >= 50) return "text-amber-500";
  return "text-rose-500";
}
function CircularProgressIndicator({
  value,
  size = 120,
  strokeWidth = 10
}) {
  const radius = (size - strokeWidth) / 2;
  const circumference = radius * 2 * Math.PI;
  const normalizedValue = Math.min(Math.max(value, 0), 100);
  const offset = circumference - normalizedValue / 100 * circumference;
  return /* @__PURE__ */ jsxRuntime.jsxs(
    "svg",
    {
      width: size,
      height: size,
      viewBox: `0 0 ${size} ${size}`,
      className: "-rotate-90 transform",
      children: [
        /* @__PURE__ */ jsxRuntime.jsx(
          "circle",
          {
            cx: size / 2,
            cy: size / 2,
            r: radius,
            fill: "none",
            stroke: "currentColor",
            strokeWidth,
            className: "text-gray-200 dark:text-gray-800"
          }
        ),
        /* @__PURE__ */ jsxRuntime.jsx(
          "circle",
          {
            cx: size / 2,
            cy: size / 2,
            r: radius,
            fill: "none",
            stroke: "currentColor",
            strokeWidth,
            strokeDasharray: circumference,
            strokeDashoffset: offset,
            strokeLinecap: "round",
            className: cn(getColorClass(value))
          }
        )
      ]
    }
  );
}
function StatsCircularProgress({
  className,
  badge = "Performance",
  heading = "Key Performance Indicators",
  description = "Visualizing our achievements across all business aspects",
  categories = defaultCategories,
  defaultCategory = "business"
}) {
  const [category, setCategory] = React__namespace.useState(defaultCategory);
  return /* @__PURE__ */ jsxRuntime.jsx(
    "div",
    {
      className: cn(
        "container mx-auto px-4 py-24 md:px-6 lg:py-32 2xl:max-w-[1400px]",
        className
      ),
      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-6xl", children: [
        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center", children: [
          /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", className: "mb-4", children: badge }),
          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold md:text-4xl", children: heading }),
          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mx-auto mt-3 max-w-2xl text-muted-foreground", children: description })
        ] }),
        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-8 md:hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
          "select",
          {
            value: category,
            onChange: (e) => setCategory(e.target.value),
            className: "w-full rounded-md border bg-background px-3 py-2",
            children: categories.map((cat) => /* @__PURE__ */ jsxRuntime.jsxs("option", { value: cat.id, children: [
              cat.name,
              " Metrics"
            ] }, `select-${cat.id}`))
          }
        ) }),
        /* @__PURE__ */ jsxRuntime.jsxs(Tabs, { value: category, onValueChange: setCategory, className: "w-full", children: [
          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-12 hidden justify-center md:flex", children: /* @__PURE__ */ jsxRuntime.jsx(TabsList, { children: categories.map((cat) => /* @__PURE__ */ jsxRuntime.jsxs(TabsTrigger, { value: cat.id, children: [
            cat.name,
            " Metrics"
          ] }, cat.id)) }) }),
          categories.map((cat) => /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: cat.id, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-8 sm:grid-cols-2 lg:grid-cols-4", children: cat.stats.map((stat, index) => /* @__PURE__ */ jsxRuntime.jsxs(
            "div",
            {
              className: "flex flex-col items-center justify-center rounded-xl border bg-card p-6",
              children: [
                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative mb-4 flex items-center justify-center", children: [
                  /* @__PURE__ */ jsxRuntime.jsx(CircularProgressIndicator, { value: stat.value, size: 120 }),
                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute flex flex-col items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs(
                    "span",
                    {
                      className: cn(
                        "text-2xl font-bold md:text-3xl",
                        getColorClass(stat.value)
                      ),
                      children: [
                        stat.value,
                        stat.suffix
                      ]
                    }
                  ) })
                ] }),
                /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-center text-lg font-semibold md:text-xl", children: stat.label }),
                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-center text-xs text-muted-foreground md:text-sm", children: stat.info })
              ]
            },
            index
          )) }) }, cat.id))
        ] })
      ] })
    }
  );
}

exports.StatsCircularProgress = StatsCircularProgress;
//# sourceMappingURL=stats-circular-progress.cjs.map
//# sourceMappingURL=stats-circular-progress.cjs.map