import type { Card } from "./cards";

function Symbol({ s }: { s: string }) {
  return <span className={`mana mana-${s === "€" ? "E" : s}`}>{s}</span>;
}

function renderText(line: string) {
  return line.split(/(\{[^}]+\})/g).map((part, i) =>
    part.startsWith("{") ? <Symbol key={i} s={part.slice(1, -1)} /> : part,
  );
}

export function CardView({ card, big = false }: { card: Card; big?: boolean }) {
  return (
    <div className={`card c-${card.color} ${big ? "big" : ""}`}>
      <div className="card-inner">
        <div className="bar title">
          <span>{card.name}</span>
          <span className="cost">
            {card.cost.map((c, i) => (
              <Symbol key={i} s={c} />
            ))}
          </span>
        </div>
        <div className="art">{card.art}</div>
        <div className="bar type">
          <span>{card.type}</span>
          <span className={`rarity r-${card.rarity}`}>◆</span>
        </div>
        <div className="textbox">
          {card.text.map((t, i) => (
            <p key={i}>{renderText(t)}</p>
          ))}
          {card.flavor && <p className="flavor">{card.flavor}</p>}
        </div>
        {card.pt && <div className="pt">{card.pt}</div>}
      </div>
    </div>
  );
}