import React from "react";
import "../styles/detailcard.scss";

export const DetailCard = (props) => {
  const { data } = props;

  const {
    caseNumber,
    caption,
    jurisdiction,
    judge,
    venue,
    caseTags,
    trialDate,
    filedDate,
    contactName,
    contactEmail,
    leadAttorney,
    parties,
  } = data;
  console.log("caseTags", caseTags);

  return (
    <div className="det-card-card-outer">
      <div className="detail-card-row">
        <div className="detail-card-col">
          <div className="detail-card-detail">
            <p className="detail-subhead"> Trial Date:</p>
            <p className="detail-text"> {trialDate}</p>
          </div>
          <div className="detail-card-detail">
            <p className="detail-subhead"> Date Filed:</p>
            <p className="detail-text"> {filedDate}</p>
          </div>
          <div className="detail-card-detail">
            <p className="detail-subhead">Lead attorney(s):</p>
            <p className="detail-text">
              {" "}
              {leadAttorney ? leadAttorney : "Not listed"}
            </p>
          </div>
        </div>

        <div className="detail-card-col">
          <div className="detail-card-detail">
            <p className="detail-subhead">Jurisdiction:</p>
            <p className="detail-text"> {jurisdiction}</p>
          </div>
          <div className="detail-card-detail">
            <p className="detail-subhead">Venue:</p>
            <p className="detail-text"> {venue}</p>
          </div>
          <div className="detail-card-detail">
            <p className="detail-subhead"> Contact:</p>
            <p className="detail-text">{contactName}</p>
          </div>
        </div>

        <div className="detail-card-col">
          <div className="detail-card-detail">
            <p className="detail-subhead">Judge:</p>
            <p className="detail-text"> {judge}</p>
          </div>

          <div className="detail-card-casetags">
            <p className="detail-subhead">Case Type:</p>
            <p className="detail-text">
              {caseTags.map((tag) => (
                <div className="casetag-text">{tag.tagName}</div>
              ))}
            </p>
          </div>
          <div className="detail-card-detail">
            <p className="detail-subhead">Contact email:</p>
            <p className="detail-text"> {contactEmail}</p>
          </div>
        </div>
      </div>
    </div>
  );
};