"use client" import React, { useState, useEffect } from 'react' import { motion, AnimatePresence } from 'framer-motion' import { cn } from "@/lib/utils" interface TextItem { text: string; image: string; } interface CircularRevealHeadingProps { items: TextItem[]; centerText: React.ReactNode; className?: string; size?: 'sm' | 'md' | 'lg'; } const sizeConfig = { sm: { container: 'h-[300px] w-[300px]', fontSize: 'text-xs', tracking: 'tracking-[0.25em]', radius: 160, gap: 40, imageSize: 'w-[75%] h-[75%]', textStyle: 'font-medium' }, md: { container: 'h-[400px] w-[400px]', fontSize: 'text-sm', tracking: 'tracking-[0.3em]', radius: 160, gap: 30, imageSize: 'w-[75%] h-[75%]', textStyle: 'font-medium', }, lg: { container: 'h-[500px] w-[500px]', fontSize: 'text-base', tracking: 'tracking-[0.35em]', radius: 160, gap: 20, imageSize: 'w-[75%] h-[75%]', textStyle: 'font-medium' } }; const usePreloadImages = (images: string[]) => { const [loaded, setLoaded] = useState(false); useEffect(() => { const loadImage = (url: string): Promise => new Promise((resolve, reject) => { const img = new Image(); img.src = url; img.onload = () => resolve(); img.onerror = reject; }); Promise.all(images.map(loadImage)) .then(() => setLoaded(true)) .catch(err => console.error('Error preloading images:', err)); }, [images]); return loaded; }; const ImagePreloader = ({ images }: { images: string[] }) => ( ); const ImageOverlay = ({ image, size = 'md' }: { image: string, size?: 'sm' | 'md' | 'lg' }) => ( ); export const CircularRevealHeading = ({ items, centerText, className, size = 'md' }: CircularRevealHeadingProps) => { const [activeImage, setActiveImage] = useState(null); const config = sizeConfig[size]; const imagesLoaded = usePreloadImages(items.map(item => item.image)); const createTextSegments = () => { const totalItems = items.length; const totalGapDegrees = config.gap * totalItems; // Total space for gaps const availableDegrees = 360 - totalGapDegrees; // Remaining space for text const segmentDegrees = availableDegrees / totalItems; // Space per text segment return items.map((item, index) => { const startPosition = index * (segmentDegrees + config.gap); const startOffset = `${(startPosition / 360) * 100}%`; return ( imagesLoaded && setActiveImage(item.image)} onMouseLeave={() => setActiveImage(null)} style={{ filter: 'url(#textShadow)', transition: 'all 0.3s ease' }} > {item.text} ); }); }; return ( <> item.image)} /> {activeImage && imagesLoaded && ( )} {!activeImage && ( {centerText} )} ); };