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

interface manaIcon {
  className:    string
}

const Black = ({ className, ...props }: manaIcon) => {
    return (
      <img
        src="https://svgs.scryfall.io/card-symbols/B.svg"
        loading="lazy"
        className={cn(
          "",
          className
        )}
        {...props}
      />
    )
  }
Black.displayName = "Black"

const Blue = ({ className, ...props }: manaIcon) => {
    return (
      <img
        src="https://svgs.scryfall.io/card-symbols/U.svg"
        loading="lazy"
        className={cn(
          "",
          className
        )}
        {...props}
      />
    )
  }
Blue.displayName = "Blue"

const Green = ({ className, ...props }: manaIcon) => {
    return (
      <img
        src="https://svgs.scryfall.io/card-symbols/G.svg"
        loading="lazy"
        className={cn(
          "",
          className
        )}
        {...props}
      />
    )
  }
Green.displayName = "Green"

const White = ({ className, ...props }: manaIcon) => {
    return (
      <img
        src="https://svgs.scryfall.io/card-symbols/W.svg"
        loading="lazy"
        className={cn(
          "",
          className
        )}
        {...props}
      />
    )
  }
White.displayName = "White"

const Red = ({ className, ...props }: manaIcon) => {
    return (
      <img
        src="https://svgs.scryfall.io/card-symbols/R.svg"
        loading="lazy"
        className={cn(
          "",
          className
        )}
        {...props}
      />
    )
  }
Red.displayName = "Red"

const Colorless = ({ className, ...props }: manaIcon) => {
    return (
      <img
        src="https://svgs.scryfall.io/card-symbols/C.svg"
        loading="lazy"
        className={cn(
          "",
          className
        )}
        {...props}
      />
    )
  }
Colorless.displayName = "Colorless"

export { Black, Blue, Green, White, Red, Colorless }