"use client";
import * as React from 'react';
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
import { Slot } from '@radix-ui/react-slot';
import { cva } from 'class-variance-authority';
import { jsx, jsxs } from 'react/jsx-runtime';

// components/blocks/stats/stats-number-ticker.tsx
function cn(...inputs) {
  return twMerge(clsx(inputs));
}
var badgeVariants = 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 ? Slot : "span";
  return /* @__PURE__ */ jsx(
    Comp,
    {
      "data-slot": "badge",
      className: cn(badgeVariants({ variant }), className),
      ...props
    }
  );
}
var defaultStats = [
  {
    value: 1e4,
    suffix: "+",
    label: "Active Users",
    description: "Growing community of professionals"
  },
  {
    value: 99.9,
    suffix: "%",
    label: "Uptime",
    description: "Enterprise-grade reliability"
  },
  {
    value: 150,
    suffix: "+",
    label: "Integrations",
    description: "Connect with your favorite tools"
  },
  {
    value: 4.9,
    label: "Rating",
    description: "Based on 2,000+ reviews"
  }
];
function useNumberTicker(endValue, duration = 2500, isVisible, decimals = 0) {
  const [displayValue, setDisplayValue] = React.useState("0");
  React.useEffect(() => {
    if (!isVisible) return;
    let startTime = null;
    let animationFrame;
    const animate = (timestamp) => {
      if (!startTime) startTime = timestamp;
      const progress = Math.min((timestamp - startTime) / duration, 1);
      const easeOutExpo = progress === 1 ? 1 : 1 - Math.pow(2, -10 * progress);
      const currentValue = easeOutExpo * endValue;
      if (decimals > 0) {
        setDisplayValue(currentValue.toFixed(decimals));
      } else {
        setDisplayValue(Math.floor(currentValue).toLocaleString());
      }
      if (progress < 1) {
        animationFrame = requestAnimationFrame(animate);
      } else {
        if (decimals > 0) {
          setDisplayValue(endValue.toFixed(decimals));
        } else {
          setDisplayValue(endValue.toLocaleString());
        }
      }
    };
    animationFrame = requestAnimationFrame(animate);
    return () => {
      if (animationFrame) {
        cancelAnimationFrame(animationFrame);
      }
    };
  }, [endValue, duration, isVisible, decimals]);
  return displayValue;
}
function TickerStatItem({
  stat,
  duration,
  isVisible
}) {
  const decimals = stat.value % 1 !== 0 ? 1 : 0;
  const displayValue = useNumberTicker(stat.value, duration, isVisible, decimals);
  return /* @__PURE__ */ jsxs("div", { className: "rounded-xl border bg-card p-6 transition-shadow hover:shadow-md", children: [
    /* @__PURE__ */ jsxs("div", { className: "mb-2 text-4xl font-bold tabular-nums md:text-5xl", children: [
      stat.prefix,
      displayValue,
      stat.suffix
    ] }),
    /* @__PURE__ */ jsx("div", { className: "mb-1 text-lg font-semibold", children: stat.label }),
    stat.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: stat.description })
  ] });
}
function StatsNumberTicker({
  className,
  badge = "By The Numbers",
  heading = "Platform Statistics",
  description = "Key metrics that demonstrate our platform's scale and reliability",
  stats = defaultStats,
  animationDuration = 2500
}) {
  const [isVisible, setIsVisible] = React.useState(false);
  const sectionRef = React.useRef(null);
  React.useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true);
          observer.disconnect();
        }
      },
      { threshold: 0.2 }
    );
    if (sectionRef.current) {
      observer.observe(sectionRef.current);
    }
    return () => observer.disconnect();
  }, []);
  return /* @__PURE__ */ jsx(
    "div",
    {
      ref: sectionRef,
      className: cn(
        "container mx-auto px-4 py-24 md:px-6 lg:py-32 2xl:max-w-[1400px]",
        className
      ),
      children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-5xl", children: [
        /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center", children: [
          /* @__PURE__ */ jsx(Badge, { className: "mb-4", children: badge }),
          /* @__PURE__ */ jsx("h2", { className: "mb-4 text-3xl font-bold md:text-4xl", children: heading }),
          /* @__PURE__ */ jsx("p", { className: "mx-auto max-w-2xl text-muted-foreground", children: description })
        ] }),
        /* @__PURE__ */ jsx("div", { className: "grid gap-6 sm:grid-cols-2 lg:grid-cols-4", children: stats.map((stat, index) => /* @__PURE__ */ jsx(
          TickerStatItem,
          {
            stat,
            duration: animationDuration,
            isVisible
          },
          index
        )) })
      ] })
    }
  );
}

export { StatsNumberTicker };
//# sourceMappingURL=stats-number-ticker.js.map
//# sourceMappingURL=stats-number-ticker.js.map