// DatasetCard.jsx — shortlist card used in the shortlist column
const accessTagClass = {
  open: "mr-tag--open",
  free_account: "mr-tag--free",
  approval: "mr-tag--medium",
  credentialed: "mr-tag--high",
  mixed_controlled: "mr-tag--vhigh",
};

const accessLabel = {
  open: "open",
  free_account: "free account",
  approval: "approval",
  credentialed: "credentialed",
  mixed_controlled: "mixed controlled",
};

const DatasetCard = ({ card, rank }) => (
  <article className="mr-dscard">
    <header className="mr-dscard__head">
      <div>
        <div className="mr-dscard__rank">#{rank}</div>
        <h3 className="mr-dscard__name">{card.name}</h3>
      </div>
      <div className="mr-dscard__fit">
        <span className="mr-dscard__fit-v">{card.fit.toFixed(2)}</span>
        <span className="mr-dscard__fit-l">FIT</span>
      </div>
    </header>
    <p className="mr-dscard__sub">{card.summary}</p>
    <div className="mr-dscard__why">{card.why}</div>
    <div className="mr-dscard__tags">
      <span className={`mr-tag ${accessTagClass[card.access]}`}>
        {accessLabel[card.access]}
      </span>
      {card.meta.map((m, i) => (
        <span key={i} className="mr-tag mr-tag--neutral">{m}</span>
      ))}
    </div>
  </article>
);

window.DatasetCard = DatasetCard;