import * as React from "react"

import { cn } from "@/lib/utils"

import type { carte } from '@prisma/client'
import { Spinner } from "./spinner"

interface carteWithProps {
  carte:      carte
  className?: string
}

const MTGCardTextHover = ({ carte, className }: carteWithProps) => {
  const [loaded, setLoaded] = React.useState(false)

  return (
    <div
      className={cn(
        "flex flex-col group cursor-pointer",
        className
      )}
    >
      <span className="w-fit border-transparent border-dotted border-b-stone-500 border-b-2">{carte.name}</span>
      <div className="MTGCardTooltip absolute hidden group-hover:block group-active:block">
        {!loaded && 
          <div className="mt-8 flex flex-col items-center justify-center h-96 w-64 bg-stone-500 rounded-md">
            <Spinner />
          </div>
        }
        <img src={carte.normal_image} className={ loaded ? "rounded-md mt-8 h-96" : "absolute opacity-0 h-96" } onLoad={() => {setLoaded(true)}} loading="lazy" />
      </div>
    </div>
  )}
MTGCardTextHover.displayName = "MTGCardTextHover"

export { MTGCardTextHover }