const foreignMovies = [
  {
    title: "Chocolat",
    director: "Lasse Hallström",
    releaseYear: 2000,
    genre: ["Drama", "Romance"],
    rating: 7,
    cast: [
      { name: "Juliette Binoche", role: "Vianne Rocher" },
      { name: "Johnny Depp", role: "Roux" },
    ],
    plotSummary:
      "A woman and her daughter open a chocolate shop in a small French village, which shakes up the rigid morality of the community.",
  },
  {
    title: "Good Will Hunting",
    director: "Gus Van Sant",
    releaseYear: 1997,
    genre: ["Drama"],
    rating: 8.5,
    cast: [
      { name: "Matt Damon", role: "Will Hunting" },
      { name: "Robin Williams", role: "Sean Maguire" },
    ],
    plotSummary:
      "A young janitor at MIT has a gift for mathematics but needs help from a psychologist to find direction in his life.",
  },
  {
    title: "Her",
    director: "Spike Jonze",
    releaseYear: 2013,
    genre: ["Drama", "Romance", "Sci-Fi"],
    rating: 9.1,
    cast: [
      { name: "Joaquin Phoenix", role: "Theodore Twombly" },
      { name: "Scarlett Johansson", role: "Samantha (voice)" },
    ],
    plotSummary:
      "In a future where technology has advanced, a lonely writer develops an unlikely relationship with an operating system designed to meet his every need.",
  },
  {
    title: "Trainspotting",
    director: "Danny Boyle",
    releaseYear: 1996,
    genre: ["Drama", "Crime"],
    rating: 6.5,
    cast: [
      { name: "Ewan McGregor", role: "Mark Renton" },
      { name: "Jonny Lee Miller", role: "Sick Boy" },
    ],
    plotSummary:
      "Renton, deeply immersed in the Edinburgh drug scene, tries to clean up and get out, despite the allure of the drugs and influence of friends.",
  },
];

const MovieItem = ({
  title,
  director,
  releaseYear,
  genre,
  rating,
  cast,
  plotSummary,
}) => (
  <ul className="card-list">
    <li className="card-item">
      <h3>{title}</h3>
      <div className="star-rating">
        {[...Array(Math.floor(rating))].map((_, i) => (
          <i key={i} className="fa-solid fa-star"></i>
        ))}
        {rating % 1 !== 0 && <i className="fa-solid fa-star-half-stroke"></i>}
        {[...Array(10 - Math.ceil(rating))].map((_, i) => (
          <i key={i} className="fa-regular fa-star"></i>
        ))}
      </div>
      <p>Director: {director}</p>
      <p>Release: {releaseYear}</p>

      <div className="genre-list">
        {genre.map((genreItem, i) => (
          <span key={i}>#{genreItem}</span>
        ))}
      </div>
      <ul className="cast">
        {cast.map((castMember, i) => (
          <li key={i}>
            <span>{castMember.name}</span>
            <span>role: {castMember.role}</span>
          </li>
        ))}
      </ul>
      <blockquote>{plotSummary}</blockquote>
    </li>
  </ul>
);

const MovieList = ({ title, movies }) => (
  <div className="container">
    <h1>{title}</h1>
    <div className="movie">
      {movies.map((movie, i) => (
        <MovieItem key={i} {...movie} />
      ))}
    </div>
  </div>
);

ReactDOM.render(
  <MovieList movies={foreignMovies} title="Movie List" />,
  document.getElementById("root")
);