'use client'

import { motion } from 'framer-motion'
import { useState } from 'react'

type itemsProps = {
  title: string
  description: string
  icon: string
  onPress: () => void
}

interface Props {
  title?: string
  items: itemsProps[]
}

const containerVariants = {
  collapsed: {
    width: 120,
    height: 40,
    transition: {
      type: 'spring',
      damping: 30,
      stiffness: 350,
    },
  },
  expanded: {
    width: 300,
    height: 320,
    transition: {
      type: 'spring',
      damping: 30,
      stiffness: 350,
      staggerChildren: 0.1,
      delayChildren: 0.2,
    },
  },
}

const itemVariants = {
  collapsed: { opacity: 0, y: 20 },
  expanded: {
    opacity: 1,
    y: 0,
    transition: {
      type: 'spring',
      stiffness: 200,
      damping: 15,
    },
  },
}

const HelpBox: React.FC<Props> = ({ items, title = 'Need Help?' }) => {
  const [isExpanded, setIsExpanded] = useState(false)

  return (
    <motion.div initial={false} animate={isExpanded ? 'expanded' : 'collapsed'}>
      <motion.div
        className='bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200'
        variants={containerVariants}
      >
        {isExpanded ? (
          <div className='p-4'>
            <div className='flex justify-between items-center mb-4'>
              <motion.h3
                className='text-lg font-semibold text-gray-800'
                initial={{ opacity: 0, y: -10 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.1 }}
              >
                Need Help?
              </motion.h3>
              <motion.button
                onClick={() => setIsExpanded(false)}
                className='text-gray-500 hover:text-gray-700'
                whileHover={{ scale: 1.1 }}
                whileTap={{ scale: 0.95 }}
              >
                ✕
              </motion.button>
            </div>

            <motion.div className='space-y-3 '>
              {items?.map((option, index) => (
                <motion.div
                  key={option.title}
                  className='flex items-center p-3 rounded-lg hover:bg-gray-50 cursor-pointer border border-gray-100'
                  variants={itemVariants}
                  whileHover={{ scale: 1.02 }}
                  whileTap={{ scale: 0.98 }}
                  custom={index}
                  onClick={option.onPress}
                >
                  <span className='text-2xl mr-3'>{option.icon}</span>
                  <div>
                    <p className='font-medium text-gray-800'>{option.title}</p>
                    <p className='text-sm text-gray-500'>
                      {option.description}
                    </p>
                  </div>
                </motion.div>
              ))}
            </motion.div>
          </div>
        ) : (
          <motion.button
            onClick={() => setIsExpanded(true)}
            className='w-full h-full flex items-center justify-center'
            whileHover={{ scale: 1.05 }}
            whileTap={{
              scale: 0.95,
            }}
          >
            <span className='font-medium text-gray-700'>{title}</span>
          </motion.button>
        )}
      </motion.div>
    </motion.div>
  )
}

export default HelpBox