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

export const Card = ({
  card,
  onClick
}: {
  card: CardProps;
  onClick: Function | null;
}) => {
  return (
    <div
      className="card"
      key="{idx}"
      onClick={_event => onClick && onClick(card.id)}
    >
      <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>Set Name:</strong>
              </td>
              <td>{card.set.name}</td>
            </tr>
            <tr>
              <td>
                <strong>Type:</strong>
              </td>
              <td>{card.type}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  );
};
