'use client'
import React from 'react'
import { motion } from 'framer-motion'
import { ArrowUpRight} from 'lucide-react'
import { FaStar } from 'react-icons/fa'

export default function HoverExtendCard() {
  return (
    <div className='relative max-w-md w-full mx-auto  rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden cursor-pointer'>
      <div className='relative h-auto overflow-hidden rounded-t-xl p-2'>
        <img src="https://images.pexels.com/photos/1687845/pexels-photo-1687845.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt='pricing card' className='object-cover  h-full rounded-lg'/>
        <motion.div className='absolute top-2 left-0 right-0 bottom-0  p-6 '>
          <div className=' flex items-center justify-between'>
            <div className='flex items-center justify-between space-x-3 '>
              <div className='bg-white/35  rounded-full p-1 px-4'>
            <span className='text-xs font-light text-white block'>Camping</span>
          </div>
          <div className='bg-white/35  rounded-full p-1 px-4'>
            <span className='text-xs font-light text-white block'>Sunrise Camp</span>
          </div>
            </div>
            <div className='bg-white/35  rounded-full p-1 px-4'>
            <span className='text-xs flex items-center justify-between gap-1 font-light text-white'>
              <FaStar size={15} />
              4.8
            </span>
          </div>
          </div>
        </motion.div>
      </div>
      <motion.div className='p-4 overflow-hidden' initial={{maxHeight: "58px"}} whileHover={{maxHeight: "300px"}} transition={{duration: 0.9, ease: [0.04, 0.62, 0.23, 0.98]}}>
       <div className='flex items-center justify-between mb-2'>
         <h2 className='text-xl font-bold  mb-1'>Petra, Jordan</h2>
        <span className='border border-black dark:border-gray-500 p-1 px-2 text-xs rounded-full'>
          Top rated
        </span>
       </div>
        <motion.div  className='space-y-3'>
          <div className="flex items-start">
              <span className="text-gray-600 dark:text-gray-400 text-xs">May 1 - 6  Business host</span>
              
            </div>
            <div className="flex items-start">
              <span className="text-gray-600 dark:text-gray-400 text-xs">A lost city carved in rose-colored stone, <br />hidden in majestic desert canyons.</span>
             
            </div>
            
            <div className="flex justify-between py-4">
              <span className="font-semibold text-lg">$139 / night</span>
              <motion.button
                className=" bg-black text-white flex items-center justify-between gap-2 pl-3 p-2 rounded-full font-light text-sm hover:bg-white hover:text-black hover:border hover:border-gray-900 dark:border dark:border-gray-600"
                
                whileTap={{ scale: 0.98 }}
              >
                Book Now
                <ArrowUpRight size={25} className='bg-white text-black rounded-full p-1' />
              </motion.button>
            </div>
           
        </motion.div>
      </motion.div>
    </div>
  )
}