"use client" import { useState } from "react" import { AnimatePresence, motion, Variants } from "motion/react" interface MenuItem { title: string description: string icon: React.ReactNode onPress: () => void } interface SupportBoxProps { title?: string items: MenuItem[] collapsedWidth?: number collapsedHeight?: number expandedWidth?: number expandedHeight?: number className?: string containerClassName?: string titleClassName?: string itemClassName?: string bgColor?: string borderColor?: string } export function SupportBox({ items, title = "Need Help?", collapsedWidth = 120, collapsedHeight = 40, expandedWidth = 300, expandedHeight = 320, className = "", containerClassName = "bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700", titleClassName = "text-gray-800 dark:text-gray-100", itemClassName = "text-gray-800 dark:text-gray-100", bgColor = "", borderColor = "", }: SupportBoxProps) { const [isExpanded, setIsExpanded] = useState(false) const boxVariants: Variants = { collapsed: { width: collapsedWidth, height: collapsedHeight, transition: { type: "spring" as const, stiffness: 200, damping: 25 }, }, expanded: { width: expandedWidth, height: expandedHeight, transition: { type: "spring" as const, stiffness: 180, damping: 22 }, }, } const contentVariants: Variants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { delay: 0.1, duration: 0.25, ease: "easeOut" }, }, exit: { opacity: 0, y: 20, transition: { duration: 0.2 } }, } return (

{isExpanded ? (

{title}

setIsExpanded(false)} className="text-gray-500 transition-all hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200" aria-label="Close menu" whileHover={{ scale: 1.2 }} whileTap={{ scale: 0.9 }} > ✕

{items.map((option, index) => ( {option.icon}

{option.title}

{option.description}

))} ) : ( setIsExpanded(true)} className={`flex h-full w-full items-center justify-center font-medium ${titleClassName}`} aria-label={`Expand ${title}`} variants={contentVariants} initial="hidden" animate="visible" exit="exit" whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} > {title} )}

) } export default SupportBox