import * as React from "react"

import { cn } from "@/lib/utils"
import { MTGCardProps } from "@/components/ui/mtg-card"
import { MTGCard } from '@/components/ui/mtg-card'

interface carte_from_stats {
  id: string,
  name: string,
  normal_image: string,
  sanitized_name: string,
  nbr_decks: number,
  total_decks: number,
  percent_decks: number,
  price: string,
  cardmarket_uri: string
}

interface CardGroupProps {
  className?:      string,
  groupName:       string,
  cards:           carte_from_stats[],
  showPrice?:      boolean,
  showStats?:      boolean
}

const CardGroup = ({ className, groupName, cards, showPrice=true, showStats=true}: CardGroupProps) => {
  return (
    <div>
      <h1>{groupName}</h1>
      <div
        className={cn(
          "flex flex-row flex-wrap gap-4 p-8",
          className
        )}
      >

          {cards.map((card: carte_from_stats) => (
            <MTGCard key={card.id} cardname={card.name} imageURI={card.normal_image} url={"/card/" + card.sanitized_name} nbrDecks={card.nbr_decks} totalDecks={card.total_decks} percentDecks={card.percent_decks} price={card.price} cardmarketURI={card.cardmarket_uri}/>
          ))}
      </div>
    </div>
  )}
MTGCard.displayName = "MTGCard"

export { CardGroup }
