"use client";
import * as React from 'react';
import { cn } from '@hanzo/ui/lib/utils';
import { jsxs, jsx } from 'react/jsx-runtime';

var Pin3D = React.forwardRef(
  ({ className, title, href, children, ...props }, ref) => {
    return /* @__PURE__ */ jsxs(
      "div",
      {
        ref,
        className: cn("group/pin relative cursor-pointer", className),
        ...props,
        children: [
          /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 z-10 flex h-full w-full items-center justify-center opacity-0 transition duration-500 group-hover/pin:opacity-100", children: /* @__PURE__ */ jsx("div", { className: "relative flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-white opacity-0 transition duration-500 group-hover/pin:opacity-50" }) }) }),
          /* @__PURE__ */ jsx("div", { className: "transform-gpu transition duration-500 group-hover/pin:scale-95", children })
        ]
      }
    );
  }
);
Pin3D.displayName = "Pin3D";

export { Pin3D };
