"use client"; import { cn } from "@/lib/utils"; import { motion, useMotionTemplate, useMotionValue, useReducedMotion, useSpring, } from "motion/react"; import type { PointerEvent, ReactNode } from "react"; const INVITE_BACKGROUND_URL = "https://images.pexels.com/photos/1624496/pexels-photo-1624496.jpeg"; export type CardLogo = | ReactNode | { src: string; alt: string; className?: string; }; export type HolographicReferralCardProps = { image?: string; imageAlt?: string; title?: string; description?: string; logo?: CardLogo; logoAlt?: string; secondLogo?: CardLogo; secondLogoAlt?: string; secondLogoHref?: string; secondLogoAriaLabel?: string; ariaLabel?: string; className?: string; }; const springOptions = { stiffness: 260, damping: 28, mass: 0.7, }; const DiscountCheckIcon = () => ( ); const CometLogo = () => ( ); const PassNumber = () => ( 01 ); const isImageLogo = ( logo: CardLogo ): logo is { src: string; alt: string; className?: string } => { return typeof logo === "object" && logo !== null && "src" in logo; }; const renderLogo = (logo: CardLogo, className: string, fallbackAlt: string) => { if (typeof logo === "string") { return ( // oxlint-disable-next-line next/no-img-element

); } if (isImageLogo(logo)) { return ( // oxlint-disable-next-line next/no-img-element

); } return logo; }; export function HolographicReferralCard({ image = INVITE_BACKGROUND_URL, imageAlt = "پس‌زمینه کارت دعوت", title = "پاس دعوت", description = "ورود یک‌نفره", logo = , logoAlt = "لوگوی برند", secondLogo = , secondLogoAlt = "شماره پاس", secondLogoHref, secondLogoAriaLabel, ariaLabel = "کارت دعوت هولوگرافیک", className, }: HolographicReferralCardProps) { const shouldReduceMotion = Boolean(useReducedMotion()); const rotateX = useSpring(useMotionValue(0), springOptions); const rotateY = useSpring(useMotionValue(0), springOptions); const translateZ = useSpring(useMotionValue(0), springOptions); const glowX = useMotionValue(50); const glowY = useMotionValue(50); const glowOpacity = useSpring(useMotionValue(0), { stiffness: 260, damping: 30, }); const cardTransform = useMotionTemplate`perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateZ(${translateZ}px)`; const glowBackground = useMotionTemplate`radial-gradient(circle at ${glowX}% ${glowY}%, rgba(255,255,255,0.9) 10%, rgba(255,255,255,0.75) 20%, rgba(255,255,255,0) 80%)`; const secondLogoContent = renderLogo( secondLogo, "size-5 object-contain text-white", secondLogoAlt ); const handlePointerMove = (event: PointerEvent) => { if (event.pointerType === "touch") { return; } const bounds = event.currentTarget.getBoundingClientRect(); const pointerX = event.clientX - bounds.left; const pointerY = event.clientY - bounds.top; const xProgress = pointerX / bounds.width; const yProgress = pointerY / bounds.height; glowX.set(xProgress * 100); glowY.set(yProgress * 100); glowOpacity.set(1); if (shouldReduceMotion) { return; } rotateX.set((yProgress - 0.5) * 20); rotateY.set((xProgress - 0.5) * -20); translateZ.set(20); }; const handlePointerEnter = (event: PointerEvent) => { if (event.pointerType === "touch") { return; } glowOpacity.set(1); if (shouldReduceMotion) { return; } translateZ.set(20); }; const handlePointerLeave = () => { glowOpacity.set(0); rotateX.set(0); rotateY.set(0); translateZ.set(0); glowX.set(50); glowY.set(50); }; const handleFocus = () => { glowOpacity.set(0.8); }; const handleBlur = () => { handlePointerLeave(); }; return (

{renderLogo(logo, "size-7 rounded-full object-cover", logoAlt)} {secondLogoHref ? ( {secondLogoContent} ) : ( secondLogoContent )}

{/* oxlint-disable-next-line next/no-img-element */} {imageAlt}

{title} {description}

); } export default HolographicReferralCard;