import { useLottie } from './chunk-ODO4GMW7.mjs';
import { __name } from './chunk-N2XQF2OL.mjs';
import React from 'react';
import Lottie from 'react-lottie-player';
import { jsx, jsxs } from 'react/jsx-runtime';

var SIZE_PRESETS = {
  xs: { width: 64, height: 64 },
  sm: { width: 128, height: 128 },
  md: { width: 256, height: 256 },
  lg: { width: 384, height: 384 },
  xl: { width: 512, height: 512 },
  full: { width: "100%", height: "100%" }
};
function LottiePlayer({
  src,
  size = "md",
  width,
  height,
  autoplay = true,
  loop = true,
  speed = 1,
  direction = 1,
  controls = false,
  background,
  className,
  showLoading = true,
  onComplete,
  onLoad,
  onError
}) {
  const { animationData, isLoading, error, retry } = useLottie({ src });
  React.useEffect(() => {
    if (animationData && onLoad) {
      onLoad();
    }
  }, [animationData, onLoad]);
  React.useEffect(() => {
    if (error && onError) {
      onError(error);
    }
  }, [error, onError]);
  const dimensions = React.useMemo(() => {
    if (width !== void 0 || height !== void 0) {
      return {
        width: width ?? SIZE_PRESETS[size].width,
        height: height ?? SIZE_PRESETS[size].height
      };
    }
    return SIZE_PRESETS[size];
  }, [size, width, height]);
  const handleComplete = React.useCallback(() => {
    if (onComplete) {
      onComplete();
    }
  }, [onComplete]);
  if (isLoading && showLoading) {
    return /* @__PURE__ */ jsx(
      "div",
      {
        className: `flex items-center justify-center ${className || ""}`,
        style: {
          width: dimensions.width,
          height: dimensions.height,
          background: background || "transparent"
        },
        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
          /* @__PURE__ */ jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-gray-300 border-t-gray-900" }),
          /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-500", children: "Loading animation..." })
        ] })
      }
    );
  }
  if (error) {
    return /* @__PURE__ */ jsx(
      "div",
      {
        className: `flex items-center justify-center ${className || ""}`,
        style: {
          width: dimensions.width,
          height: dimensions.height,
          background: background || "transparent"
        },
        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 p-4 text-center", children: [
          /* @__PURE__ */ jsx(
            "svg",
            {
              className: "h-8 w-8 text-red-500",
              fill: "none",
              stroke: "currentColor",
              viewBox: "0 0 24 24",
              children: /* @__PURE__ */ jsx(
                "path",
                {
                  strokeLinecap: "round",
                  strokeLinejoin: "round",
                  strokeWidth: 2,
                  d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                }
              )
            }
          ),
          /* @__PURE__ */ jsx("div", { className: "text-sm text-red-600", children: error.message }),
          /* @__PURE__ */ jsx(
            "button",
            {
              onClick: retry,
              className: "rounded bg-red-100 px-3 py-1 text-sm text-red-700 hover:bg-red-200",
              children: "Retry"
            }
          )
        ] })
      }
    );
  }
  if (!animationData) {
    return null;
  }
  return /* @__PURE__ */ jsxs(
    "div",
    {
      className,
      style: {
        width: dimensions.width,
        height: dimensions.height,
        background: background || "transparent"
      },
      children: [
        /* @__PURE__ */ jsx(
          Lottie,
          {
            animationData,
            play: autoplay,
            loop,
            speed,
            direction,
            style: {
              width: "100%",
              height: "100%"
            },
            onComplete: handleComplete,
            rendererSettings: {
              preserveAspectRatio: "xMidYMid meet"
            }
          }
        ),
        controls && /* @__PURE__ */ jsx("div", { className: "mt-2 flex items-center justify-center gap-2", children: /* @__PURE__ */ jsxs("span", { className: "text-xs text-gray-500", children: [
          "Speed: ",
          speed,
          "x | Direction: ",
          direction === 1 ? "Forward" : "Reverse"
        ] }) })
      ]
    }
  );
}
__name(LottiePlayer, "LottiePlayer");

export { LottiePlayer };
//# sourceMappingURL=LottiePlayer.client-5LDSSJWS.mjs.map
//# sourceMappingURL=LottiePlayer.client-5LDSSJWS.mjs.map