import React, { useEffect, useState } from "react";
import "../App.css";
import { Link } from "react-router-dom";

const CharacterCard = (props) => {
  return (
    <ul className="character-container">
      {props.data.map((character, index) => {
        const id = character.url.split("/").filter(Boolean).pop();
        return (
          <li className="character-card" key={index}>
            <Link to={`/characterDetails/${id}`}>
              <div className="character-details">
                <p>
                  <strong> Name </strong> {character.name}
                </p>
                <p>
                  <strong> Gender </strong> {character.gender}
                </p>
                <p>
                  <strong> Height </strong> {character.height} cm
                </p>
                <p>
                  <strong> Hair Color </strong> {character.hair_color}
                </p>
                <p>
                  <strong> Birth Year </strong> {character.birth_year}
                </p>
              </div>  
            </Link>
          </li>
        );
      })}
    </ul>
  );
};

export default CharacterCard;
