import * as React from "react";
import { CardProps } from "./types";

export const fullcardStyles = {
  content: {
    backgroundColor: "#0c0c0c",
    color: "#f8f8f8"
  }
};

export const FullCard = ({ card }: { card: CardProps | null }) => {
  if (card === null) {
    return <></>;
  }

  return (
    <div className="fullcard">
      <img src={card.imageUrl} alt={card.name} />
      <div className="content">
        <h4>{card.name}</h4>
        <p className="card-text">{card.text}</p>
        <table>
          <tbody>
            <tr>
              <td>
                <strong>Type</strong>
              </td>
              <td>{card.type}</td>
              <td>
                <strong>Cost</strong>
              </td>
              <td>{card.cost}</td>
            </tr>
            <tr>
              <td>
                <strong>Subtypes</strong>
              </td>
              <td>{card.subtypes.join(", ")}</td>
              <td>
                <strong>Power</strong>
              </td>
              <td>{card.power}</td>
            </tr>
            <tr>
              <td>
                <strong>Rarity</strong>
              </td>
              <td>{card.rarity}</td>
              <td>
                <strong>Health</strong>
              </td>
              <td>{card.health}</td>
            </tr>
            <tr>
              <td>
                <strong>Set</strong>
              </td>
              <td>{card.set.name}</td>
              <td>
                <strong>Soul Summon</strong>
              </td>
              <td>{card.soulSummon}</td>
            </tr>
            <tr>
              <td>
                <strong>Attributes</strong>
              </td>
              <td>{card.attributes.join(", ")}</td>
              <td>
                <strong>Soul Trap</strong>
              </td>
              <td>{card.soulTrap}</td>
            </tr>
            <tr>
              <td>
                <strong>Keywords</strong>
              </td>
              <td>{card.keywords}</td>
              <td />
            </tr>
          </tbody>
        </table>

        <table>
          <tbody>
            <tr>
              <td>
                <strong>Set Name:</strong>
              </td>
              <td>{card.set.name}</td>
            </tr>
            <tr>
              <td>
                <strong>Type:</strong>
              </td>
              <td>{card.type}</td>
            </tr>
          </tbody>
        </table>
        {card.collectible ? <p>This card is considered collectible.</p> : ""}
        {card.unique ? (
          <p>
            This card is unique. Unique cards may only be used once per deck.
          </p>
        ) : (
          ""
        )}
      </div>
    </div>
  );
};
