woedii/components/cards/HoverCards.tsx

'use client'

import React from 'react'
import Image from 'next/image'
import Link from 'next/link'
import {
    HoverCard,
    HoverCardContent,
    HoverCardTrigger,
} from "@/components/ui/hover-card"

export interface HoverCardsProps {
    triggerText: string
    videourl: string
    description: string
    linkText?: string
    link?: string,
    isImage?: boolean,
}

export default function HoverCards({
    triggerText,
    videourl,
    description,
    link = '#',
    linkText = 'Purchase & Read More',
    isImage
}: HoverCardsProps) {
    return (
        <HoverCard>
            <HoverCardTrigger asChild>
                <span className="text-blue-400 cursor-pointer underline inline">{triggerText}</span>
            </HoverCardTrigger>
            <HoverCardContent className="w-80">
                <div className="max-w-xs bg-white rounded-lg overflow-hidden shadow-lg">
                    <div className="relative h-48 w-full">  
                        {isImage ?
                        <Image src={videourl} alt={videourl} width={100} height={100} className="absolute top-0 left-0 w-full h-full object-cover"   />
                        : 
                        <video
                        className="absolute top-0 left-0 w-full h-full object-cover"
                        muted
                        loop
                        playsInline
                        autoPlay
                        src={videourl}
                        ></video>
                    }
                       
                      
                    </div>

                    <div className="p-4">
                        <p className="text-gray-700 text-sm mb-4">
                            {description}
                        </p>

                        <Link href={link}>
                            <span className="text-purple-700 font-medium text-sm hover:text-purple-900 transition-colors">
                                {linkText}
                            </span>
                        </Link>
                    </div>
                </div>
            </HoverCardContent>
        </HoverCard>
    )
}