"use client";
import { jsxs, jsx } from "../../packages/jsx/src/jsx-runtime.js";
import { forwardRef, Fragment } from "react";
import { mapResponsiveStyleValue } from "../../theme/utils.js";
import { Divider } from "../../atoms/Divider/Divider.js";
import { Spacing } from "../../tokens/Spacing.js";
import { Text } from "../../atoms/Text/Text.js";
import { Icon } from "../../atoms/Icon/Icon.js";
import { useTheme } from "../../theme/useTheme.js";
const DEFAULT_SIZE = "medium";
const quoteSizes = {
  small: "20px",
  medium: "24px",
  large: "32px"
};
const authorSizes = {
  small: "16px",
  medium: "18px",
  large: "18px"
};
const Quote = forwardRef(
  ({ size, author, authorInfo, callout = false, className, children, ...props }, ref) => {
    const quoteSize = mapResponsiveStyleValue(size, DEFAULT_SIZE, (value) => quoteSizes[value]);
    const authorSize = mapResponsiveStyleValue(size, DEFAULT_SIZE, (value) => authorSizes[value]);
    return /* @__PURE__ */ jsxs("div", { ref, className, ...props, children: [
      /* @__PURE__ */ jsx(Divider, { diamonds: true }),
      /* @__PURE__ */ jsxs("div", { sx: { p: Spacing["32px"] }, children: [
        /* @__PURE__ */ jsx(Blur, { position: "top" }),
        /* @__PURE__ */ jsxs(Text.Q, { as: callout ? "p" : "blockquote", size: quoteSize, color: "White88", children: [
          !callout ? "“" : null,
          children,
          !callout ? "”" : null
        ] }),
        !callout && author ? /* @__PURE__ */ jsxs(Text.P, { as: "div", size: authorSize, sx: { mt: Spacing["16px"] }, children: [
          /* @__PURE__ */ jsxs(Text, { inline: true, color: "White88", children: [
            "– ",
            author
          ] }),
          authorInfo ? /* @__PURE__ */ jsxs(Fragment, { children: [
            /* @__PURE__ */ jsx(
              Icon.DiamondSolid,
              {
                inline: true,
                size: "8px",
                color: "White48",
                sx: { mx: Spacing["8px"], verticalAlign: "center", top: "-2px" }
              }
            ),
            /* @__PURE__ */ jsx(Text, { inline: true, color: "White48", children: authorInfo })
          ] }) : null
        ] }) : null,
        /* @__PURE__ */ jsx(Blur, { position: "bottom" })
      ] }),
      /* @__PURE__ */ jsx(Divider, { diamonds: true })
    ] });
  }
);
Quote.displayName = "Quote";
function Blur({ position }) {
  const { theme } = useTheme();
  return /* @__PURE__ */ jsx(
    "div",
    {
      sx: {
        position: "absolute",
        left: 0,
        right: 0,
        top: position === "top" ? Spacing["8px"] : void 0,
        bottom: position === "bottom" ? Spacing["8px"] : void 0,
        filter: "blur(50px)",
        transform: "translate3d(0, 0, 0)"
        // see https://graffino.com/til/CjT2jrcLHP-how-to-fix-filter-blur-performance-issue-in-safari
      },
      children: /* @__PURE__ */ jsx(
        "div",
        {
          sx: {
            height: "16px",
            backgroundImage: `linear-gradient(90deg, ${position === "top" ? theme.colors.Purple : theme.colors.Red} 0%, ${position === "top" ? theme.colors.Red : theme.colors.Purple} 100%)`,
            filter: "blur(50px)",
            transform: "translate3d(0, 0, 0)"
          }
        }
      )
    }
  );
}
export {
  Quote
};
