import axios from "axios";
import React, { useEffect, useState } from "react";
import { useParams } from "react-router";
import Film from "../Film";
import "../characterDetail/CharacterDetails.css";
const CharacterDetails = () => {
  const { id } = useParams();
  console.log(id);
  const [character, setCharacter] = useState(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true);
    axios
      .get(`https://swapi.py4e.com/api/people/${id}/`)
      .then((res) => {
        setCharacter(res.data);
        setLoading(false);
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);

  if (loading) {
    return <p> loading...</p>;
  }

  if (!character) {
    return <p> Character Details not found!</p>;
  }

  return (
    <div className="character-detail-page">
      <h2>Character Info </h2>
      <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>Skin Color </strong> {character.skin_color}
      </p>
      <p>
        <strong>Eye Color  </strong> {character.eye_color}
      </p>
      <p>
        <strong>Birth Year </strong> {character.birth_year}
      </p>

      <p>
        <strong> Films </strong> <Film />
      </p>
    </div>
  );
};

export default CharacterDetails;
