import * as React from "react"

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

interface MTGCardProps {
  className?: string,
  imageURI: string,
  cardname: string,
  url: string,
  nbrDecks?: number,
  totalDecks?: number,
  percentDecks?: number,
  price?: string,
  cardmarketURI?: string
}

const MTGCard = ({ className, imageURI, cardname, url, nbrDecks, totalDecks, percentDecks, price, cardmarketURI }: MTGCardProps) => {
  const [loaded, setLoaded] = React.useState(false)

  return (
    <a
      href={url}
      className={cn(
        "flex flex-col w-48",
        className
      )}
    >
      {!loaded && 
        <span className="h-64 shadow">Loading...</span>
      }
      <img src={imageURI} className="rounded" height={loaded ? 'auto' : '0'} onLoad={() => {setLoaded(true)}} loading="lazy" />
      <div className="flex flex-col items-center gap-0">
        { price != undefined && (
          <a className="text-xs" href={cardmarketURI != undefined ? cardmarketURI : "#"} target={cardmarketURI != undefined ? "_blank" : "_self"}>{price}€</a>
        )}
        <span className="text-center text-xs">{cardname}</span>
        { nbrDecks != undefined && (
          <>
            <span className="text-md">{nbrDecks} Deck{nbrDecks > 1 ? "s" : ""} sur {totalDecks} ({percentDecks}%)</span>
          </>
        )}
      </div>
    </a>
  )}
MTGCard.displayName = "MTGCard"

export { MTGCard, type MTGCardProps }
