import { jsxs as d, jsx as e } from "react/jsx-runtime";
import { useState as w } from "react";
import { C as f } from "./index.module.Db2VUAe1.js";
import { S as g } from "./Slider.CBfpi4Hu.js";
import { S as u } from "./SocialIconsPreview.D__IN9Jb.js";
import { a as S } from "./index.CfQlFjZU.js";
const x = "creator_preview_lTmN9", Z = "creator_outline_9wk73", z = "creator_socialIcons_Jddsy", I = "creator_title_4-tLE", M = "creator_cropperContainer_9-1ww", P = "creator_cropArea_x38Jw", V = "creator_zoomSliderContainer_BWLGN", o = { preview: x, outline: Z, socialIcons: z, title: I, cropperContainer: M, cropArea: P, zoomSliderContainer: V }, A = 0.1;
function j({
  displayName: a,
  icons: n,
  imageSrc: i,
  onCropAreaChange: c,
  initialZoom: l
}) {
  const [s, C] = w({ x: 0, y: 0 }), [t, m] = w(l);
  return {
    displayName: a,
    icons: n,
    imageSrc: i,
    onCropAreaChange: c,
    crop: s,
    zoom: t,
    onCropChange: (r) => {
      C(r);
    },
    onZoomChange: (r) => {
      m(r);
    },
    cropSize: {
      width: 284,
      height: 357
    },
    previewClassName: o.preview,
    cropperClasses: {
      containerClassName: o.cropperContainer,
      cropAreaClassName: o.cropArea
    },
    zoomSliderContainerClassName: o.zoomSliderContainer,
    outlineClassName: o.outline,
    titleClassName: o.title,
    socialIconsClassName: o.socialIcons
  };
}
function y({
  displayName: a,
  icons: n,
  imageSrc: i,
  onCropAreaChange: c,
  crop: l,
  zoom: s,
  onCropChange: C,
  onZoomChange: t,
  cropSize: m,
  cropperClasses: p,
  previewClassName: h,
  zoomSliderContainerClassName: r,
  outlineClassName: v,
  titleClassName: _,
  socialIconsClassName: N
}) {
  return /* @__PURE__ */ d("div", { className: h, children: [
    /* @__PURE__ */ e(
      f,
      {
        classes: p,
        image: i,
        crop: l,
        zoom: s,
        cropSize: m,
        objectFit: "vertical-cover",
        restrictPosition: !0,
        showGrid: !1,
        onCropChange: C,
        onCropComplete: c,
        onZoomChange: t
      }
    ),
    /* @__PURE__ */ e("div", { className: r, children: /* @__PURE__ */ e(
      g,
      {
        step: A,
        min: 1,
        max: 3,
        value: s,
        onChange: t
      }
    ) }),
    /* @__PURE__ */ d("div", { className: v, children: [
      /* @__PURE__ */ e(
        "svg",
        {
          xmlns: "http://www.w3.org/2000/svg",
          width: "160",
          height: "160",
          viewBox: "0 0 160 160",
          fill: "none",
          children: /* @__PURE__ */ e(
            "path",
            {
              d: "M80 40C87.3334 40 93.3334 46 93.3334 53.3333C93.3334 60.6666 87.3334 66.6666 80 66.6666C72.6667 66.6666 66.6667 60.6666 66.6667 53.3333C66.6667 46 72.6667 40 80 40ZM80 100C98 100 118.667 108.6 120 113.333V120H40V113.4C41.3334 108.6 62 100 80 100ZM80 26.6666C65.2667 26.6666 53.3334 38.6 53.3334 53.3333C53.3334 68.0666 65.2667 80 80 80C94.7334 80 106.667 68.0666 106.667 53.3333C106.667 38.6 94.7334 26.6666 80 26.6666ZM80 86.6666C62.2 86.6666 26.6667 95.6 26.6667 113.333V133.333H133.333V113.333C133.333 95.6 97.8 86.6666 80 86.6666Z",
              fill: "#5F35E6"
            }
          )
        }
      ),
      /* @__PURE__ */ e("h1", { className: _, children: a }),
      /* @__PURE__ */ e("div", { className: N, children: /* @__PURE__ */ e(u, { icons: n }) })
    ] })
  ] });
}
const L = S(y, j);
export {
  L as C
};
