'use client'
import { useHover } from "usehooks-ts";
import { useRef } from "react";

export default function Page() {
    const ref = useRef(null);
    const isHover = useHover(ref);

    return (
        <div className='bg-white rounded-lg cursor-pointer w-64'>
            <div className='relative w-full h-auto' ref={ref}>
                <img className={'object-cover w-full rounded-t-lg'}
                     src={!isHover ?
                         '//res-academy.cache.wpscdn.com/static/cover/xls_v2.png' :
                         '//res-academy.cache.wpscdn.com/youtube-gif/20220419/144426_H3Ns3Os0zqE_72_10.gif'}
                     alt={'img'}
                />
                <div className={`absolute bottom-2 right-2
                                bg-gray-600 text-white text-xs
                                px-1 py-0.5 rounded-md  
                                ${isHover ? 'hidden' : 'flex'}`}
                >
                    03:14
                </div>
            </div>
            <div className='flex justify-between text-xs mt-2 text-gray-500 px-2'>
                <div className='flex items-center gap-1 my-1'>
                    <img className='w-4 h-5'
                         alt={''}
                         src={'//res-academy.cache.wpscdn.com/static/images/icon_excel.png'}/>
                    <span>Spread</span>
                </div>
                <div>18.0K views</div>
            </div>
            <h1 className='text-md font-semibold mt-2 px-2 pb-3'>How use WPS</h1>
        </div>
    )
}