text: import React from "react";
  import { Link } from "react-router-dom";
  
  import "./CharacterCard.scss";
  
  import * as routes from "../../constants/routes";
  
  function CharacterCard({ id, name, image, species, status, origin, location }) {
    let locationId = origin.url.split("/");
     locationId = locationId[locationId.length - 1];
    
    return (
      <div className="col col-12 col-sm-6 col-xl-3 CharacterCard">
        <img className="CharacterCard__img" src={image} alt="" />
        <Link to={`${routes.CHARACTER}/${id}`}>
          <h3 className="CharacterCard__name h4">{name}</h3>
        </Link>
        <div className="CharacterCard__meta">
        {locationId && (
             <Link
               className="CharacterCard__meta-item"
               to={`${routes.LOCATION}/${locationId}`}
             >
               {origin.name}
             </Link>
           )}
           {!locationId && <p>Unknown</p>}
          <p className="CharacterCard__meta-item">|</p>
          <p className="CharacterCard__meta-item">{status}</p>
        </div>
      </div>
    );
  }
  
  export default CharacterCard;
  