import { jsxs as c, jsx as r } from "react/jsx-runtime";
import { Classes as g } from "../../constants/selectors.js";
import { cn as l } from "../../utils/cn.js";
import { isRemoteUrl as u } from "../../utils/is-remote-url.js";
const n = 24, s = 10, e = n / 2, p = (t) => {
  const i = `
    <svg width="${n}" height="${n}" xmlns="http://www.w3.org/2000/svg">
      <g opacity="0.5">
        <line x1="${e}" y1="${e - s / 2}" x2="${e}" y2="${e + s / 2}" 
              stroke="${t}" stroke-width="1" stroke-linecap="round"/>
        <line x1="${e - s / 2}" y1="${e}" x2="${e + s / 2}" y2="${e}" 
              stroke="${t}" stroke-width="1" stroke-linecap="round"/>
      </g>
    </svg>
  `;
  return `data:image/svg+xml,${encodeURIComponent(i)}`;
}, x = p("#F0F0F0"), b = p("#232323"), m = `${n}px ${n}px`, $ = ({ href: t, children: i, title: a, description: o, className: f }) => {
  const d = l(
    "pointer-events-none size-full select-none bg-center bg-repeat-round [grid-area:1/1]",
    "after:absolute after:left-0 after:h-full after:w-[7px] after:bg-stone-50 after:content-[''] dark:after:bg-stone-900",
    "before:absolute before:right-0 before:h-full before:w-[7px] before:bg-stone-50 before:content-[''] dark:before:bg-stone-900"
  );
  return /* @__PURE__ */ c(
    "a",
    {
      href: t,
      ...u(t) ? { target: "_blank", rel: "noreferrer" } : {},
      className: l(
        g.Tile,
        "group not-prose flex w-full min-w-0 cursor-pointer flex-col items-center justify-center gap-1",
        f
      ),
      children: [
        /* @__PURE__ */ c(
          "div",
          {
            className: "relative grid h-[170px] w-full place-items-center overflow-hidden rounded-2xl bg-stone-50 py-1 dark:bg-stone-900",
            "data-component-part": "tile-children-container",
            children: [
              /* @__PURE__ */ r(
                "div",
                {
                  "aria-hidden": "true",
                  className: l(d, "block dark:hidden"),
                  "data-component-part": "tile-background-light",
                  style: {
                    backgroundImage: `url("${x}")`,
                    backgroundSize: m
                  }
                }
              ),
              /* @__PURE__ */ r(
                "div",
                {
                  "aria-hidden": "true",
                  className: l(d, "hidden dark:block"),
                  "data-component-part": "tile-background-dark",
                  style: {
                    backgroundImage: `url("${b}")`,
                    backgroundSize: m
                  }
                }
              ),
              /* @__PURE__ */ r(
                "div",
                {
                  className: "flex size-full items-center justify-center p-8 [grid-area:1/1] [&_svg]:h-auto [&_svg]:max-h-full [&_svg]:w-auto [&_svg]:max-w-full",
                  "data-component-part": "tile-children-inner-container",
                  children: i
                }
              )
            ]
          }
        ),
        (!!a || !!o) && /* @__PURE__ */ c(
          "div",
          {
            className: "flex w-full min-w-0 flex-col items-center justify-center gap-1 p-2",
            "data-component-part": "tile-text-container",
            children: [
              !!a && /* @__PURE__ */ r(
                "p",
                {
                  className: "m-0 max-w-full truncate font-medium text-base text-stone-900 tracking-[-0.2px] dark:text-stone-200",
                  "data-component-part": "tile-title",
                  title: a,
                  children: a
                }
              ),
              !!o && /* @__PURE__ */ r(
                "p",
                {
                  className: "m-0 max-w-full truncate font-normal text-sm text-stone-600 tracking-[-0.1px] dark:text-stone-400",
                  "data-component-part": "tile-description",
                  title: o,
                  children: o
                }
              )
            ]
          }
        )
      ]
    }
  );
};
export {
  $ as Tile
};
