import * as React from "react"

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

interface MTGCardProps {
  className?: string,
  imageURI: string,
  cardname: string,
  url: string
}

const MTGCard = ({ className, imageURI, cardname, url }: 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" />
      <span className="text-center">{cardname}</span>
    </a>
  )}
MTGCard.displayName = "MTGCard"

export { MTGCard }