{"size": 1140, "ext": "js", "max_stars_repo_path": "client/src/components/Card.js", "max_stars_repo_name": "StTronn/spotify-party-1.0", "max_stars_repo_stars_event_min_datetime": "2020-09-05T18:06:09.000Z", "max_stars_repo_stars_event_max_datetime": "2020-09-05T18:06:09.000Z", "max_issues_repo_path": "client/src/components/Card.js", "max_issues_repo_name": "StTronn/spotify-party-1.0", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "client/src/components/Card.js", "max_forks_repo_name": "StTronn/spotify-party-1.0", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 26.511627907, "max_line_length": 78, "alphanum_fraction": 0.4684210526}
import React from "react";
import "../App.css";
import styled from "styled-components";

const Image = styled.img`
  height: 100%;
  margin: auto;
  object-fit: cover;
`;

function Card({ user, songInformation }) {
  if (songInformation && songInformation.item)
    return (
      <>
        <div style={{ maxWidth: "200px" }} className="card md:max-w-md">
          <div className="cardImage">
            <img src={songInformation.item.album.images[0].url} alt="Pic 1" />
          </div>
          <div className="cardContent">
            <h3>{songInformation.item.name}</h3>
            <span>
              {songInformation.item.artists.map(
                (artist, index) =>
                  `${artist.name}${
                    songInformation.item
                      ? songInformation.item.artists.length - 1 === index
                        ? ""
                        : ", "
                      : ""
                  }`
              )}
            </span>

            <p className=" mt-2 mt-0 text-sp-green text-xs">{user}</p>
          </div>
        </div>
      </>
    );
  return <></>;
}

export default Card;
