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

interface SymbolsIconProps {
  className:    string
}

const CommanderIcon = ({ className }: SymbolsIconProps) => {
  return (
    <img className={cn("h-4",className)} src="/assets/commander.svg"></img>
  )}
CommanderIcon.displayName = "CommanderIcon"

const PlaneswalkerIcon = ({ className }: SymbolsIconProps) => {
  return (
    <img className={cn("h-4",className)} src="/assets/planeswalker.svg"></img>
  )}
PlaneswalkerIcon.displayName = "PlaneswalkerIcon"

const SorceryIcon = ({ className }: SymbolsIconProps) => {
  return (
    <img className={cn("h-4",className)} src="/assets/sorcery.svg"></img>
  )}
SorceryIcon.displayName = "SorceryIcon"

const InstantIcon = ({ className }: SymbolsIconProps) => {
  return (
    <img className={cn("h-4",className)} src="/assets/instant.svg"></img>
  )}
InstantIcon.displayName = "InstantIcon"

const CreatureIcon = ({ className }: SymbolsIconProps) => {
  return (
    <img className={cn("h-4",className)} src="/assets/creature.svg"></img>
  )}
CreatureIcon.displayName = "CreatureIcon"

const ArtifactIcon = ({ className }: SymbolsIconProps) => {
  return (
    <img className={cn("h-4",className)} src="/assets/artifact.svg"></img>
  )}
ArtifactIcon.displayName = "ArtifactIcon"

const EnchantmentIcon = ({ className }: SymbolsIconProps) => {
  return (
    <img className={cn("h-4",className)} src="/assets/enchantment.svg"></img>
  )}
EnchantmentIcon.displayName = "EnchantmentIcon"

const LandIcon = ({ className }: SymbolsIconProps) => {
  return (
    <img className={cn("h-4",className)} src="/assets/land.svg"></img>
  )}
LandIcon.displayName = "LandIcon"

export { CommanderIcon, PlaneswalkerIcon, SorceryIcon, InstantIcon, CreatureIcon, ArtifactIcon, EnchantmentIcon, LandIcon }