import * as React from "react"

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

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

interface CardGroupProps {
  className?:       string,
  groupName:        string,
  cards:            carte_from_stats[],
  showPrice?:       boolean,
  showStats?:       boolean,
  showPercent?:     boolean,
  commanderUrl?:    boolean,
  id?:              string,
  Icon?:            any
}

const CardGroup = ({ className, groupName, cards, showPrice=true, showStats=true,showPercent=true, commanderUrl=false, id, Icon}: CardGroupProps) => {
  return (
    <div id={id} className={cn('flex flex-col w-full items-start',className)}>
      <div className="flex items-center flex-row gap-2 mb-2">
        { Icon && (
          <Icon className="h-6"/>
        )}
        <h1 className="text-3xl">{groupName}</h1>
      </div>
      <div
        className="flex flex-row flex-wrap gap-4"
      >
          {cards.length == 0 && (
            <span>Pas de cartes...</span>
          )}
          {cards.length > 0 && cards.map((card: carte_from_stats) => (
            <MTGCard key={card.id} cardname={card.name} imageURI={card.normal_image} url={commanderUrl ? "/commander/card/" + card.url : undefined} nbrDecks={card.nbr_decks} totalDecks={card.total_decks} percentDecks={showPercent ? card.percent_decks : undefined} price={card.price} synergy={card.synergy} cardmarketURI={card.cardmarket_uri}/>
          ))}
      </div>
    </div>
  )}
MTGCard.displayName = "MTGCard"

export { CardGroup }
