import { jsxs as d, jsx as e } from "react/jsx-runtime";
import { useRef as g } from "react";
import { a as C } from "./index.CfQlFjZU.js";
import { n as b } from "./index.B0wX8xO7.js";
import { B as f } from "./Button.CpTwUWVr.js";
import { a as k } from "./ProgressTracker.DyY57Wb4.js";
import { P as y } from "./ProfilePreview.Dh7SMM-9.js";
import "./index.C1ZfizMq.js";
import "./SocialIcon.B0ronCv9.js";
import { O as I } from "./Onboarding.BDRBUM0D.js";
const v = "creator_mainContentContainer_iIzcI", N = "creator_header_Tuk0W", P = "creator_body_PFXRH", p = { mainContentContainer: v, header: N, body: P };
function _({
  displayName: t,
  onImageSelect: i,
  previewIcons: o,
  isSkippable: r,
  onSkip: l
}) {
  const a = g(null);
  function s() {
    a.current?.click();
  }
  function c(m) {
    const n = m.target.files?.[0];
    n && i(n);
  }
  return {
    displayName: t,
    mainContentContainerClassName: p.mainContentContainer,
    headerClassName: p.header,
    bodyClassName: p.body,
    steps: [{ label: "Links" }, { label: "Image" }, { label: "Content" }],
    activeStepIndex: 1,
    previewIcons: o,
    fileInputRef: a,
    onButtonClick: s,
    onImageChange: c,
    isSkippable: r,
    onSkip: l
  };
}
function x({
  mainContentContainerClassName: t,
  headerClassName: i,
  bodyClassName: o,
  steps: r,
  activeStepIndex: l,
  previewIcons: a,
  displayName: s,
  fileInputRef: c,
  onButtonClick: m,
  onImageChange: n,
  isSkippable: u,
  onSkip: h
}) {
  return /* @__PURE__ */ d(I, { layout: "plain", children: [
    /* @__PURE__ */ e(k, { steps: r, activeStepIndex: l }),
    /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(y, { icons: a, displayName: s }) }),
    /* @__PURE__ */ d("div", { className: t, children: [
      /* @__PURE__ */ d("div", { children: [
        /* @__PURE__ */ e("h1", { className: i, children: "Add a header image" }),
        /* @__PURE__ */ e("p", { className: o, children: "Make your page standout - this image can be changed later." })
      ] }),
      /* @__PURE__ */ e(f, { label: "Upload", size: "full", onClick: m }),
      /* @__PURE__ */ e(
        b,
        {
          value: u,
          then: /* @__PURE__ */ e(f, { label: "Skip", size: "small", onClick: h })
        }
      ),
      /* @__PURE__ */ e(
        "input",
        {
          "data-testid": "file-input",
          type: "file",
          ref: c,
          onChange: n,
          hidden: !0,
          accept: "image/png,image/jpeg,image/webp"
        }
      )
    ] })
  ] });
}
const A = C(x, _);
export {
  A as H
};
