Zoom Effect

"use client"

import type React from "react"

import { useState, useRef, type ReactNode } from "react"
import { cn } from "~/lib/utils"

interface ZoomEffectProps {
children: ReactNode
zoomScale?: number
lupaSize?: number
duration?: number
className?: string
containerClassName?: string
lupaBorderWidth?: number
lupaBorderColor?: string
enableShadow?: boolean
shadowColor?: string
}

export function ZoomEffect({
children,
zoomScale = 2,
lupaSize = 100,
duration = 300,
className = "",
containerClassName = "",
lupaBorderWidth = 2,
lupaBorderColor = "rgba(255, 255, 255, 0.8)",
enableShadow = true,
shadowColor = "rgba(0, 0, 0, 0.3)",
}: ZoomEffectProps) {
const [isHovered, setIsHovered] = useState(false)
const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
const containerRef = useRef<HTMLDivElement>(null)
const contentRef = useRef<HTMLDivElement>(null)

const handleMouseEnter = () => {
  setIsHovered(true)
}

const handleMouseLeave = () => {
  setIsHovered(false)
}

const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
  if (!containerRef.current) return

  const rect = containerRef.current.getBoundingClientRect()
  const x = e.clientX - rect.left
  const y = e.clientY - rect.top

  setMousePosition({ x, y })
}

return (
  <div
    ref={containerRef}
    className={cn("relative overflow-hidden", containerClassName)}
    onMouseEnter={handleMouseEnter}
    onMouseLeave={handleMouseLeave}
    onMouseMove={handleMouseMove}
  >
    <div ref={contentRef} className={cn("relative h-full", className)}>
      {children}
    </div>

    {isHovered && (
      <div
        className="absolute pointer-events-none z-10"
        style={{
          width: `lupaSizepx`,
          height: `lupaSizepx`,
          borderRadius: "50%",
          border: `lupaBorderWidthpx solid lupaBorderColor`,
          boxShadow: `enableShadow ? "0 0 10px shadowColor" : "none"`,
          overflow: "hidden",
          top: `mousePosition.y - lupaSize / 2`,
          left: `mousePosition.x - lupaSize / 2`,
          transition: `box-shadow durationms ease`,
        }}
      >
        <div
          className="absolute"
          style={{
            width: `containerRef.current?.offsetWidth`,
            height: `containerRef.current?.offsetHeight`,
            transform: `scale(zoomScale)`,
            transformOrigin: `mousePosition.xpx mousePosition.ypx`,
            top: -mousePosition.y + lupaSize / 2,
            left: -mousePosition.x + lupaSize / 2,
          }}
        >
          <div className={cn("relative h-full", className)}>{children}</div>
        </div>
      </div>
    )}
  </div>
)
}