movie-explorer/src/objects/sidebar.tsx

import React from "react";
import { Movie } from "./movie-wall";
import tmdb from "./tmdb";
import { WhereToWatch } from "./whereToWatch";
import CrossfadeImage from 'react-crossfade-image'
export interface SidebarProps extends React.ComponentPropsWithRef<"div"> {
  movie: Movie;
  similarMoviesAvailable: boolean;
  watchProviders: {};
}
export function Sidebar({ movie, similarMoviesAvailable, watchProviders }: SidebarProps) {
  return <div id="sidebar">
    <h1>{movie?.title ?? "loading"}</h1>
    <figure>
      <a href={tmdb.makeMovieLink(movie)} target="_blank" rel="noopener noreferrer">
        <CrossfadeImage src={tmdb.makeImgUrl(movie.poster_path ?? "")} containerClass="chosen-movie-poster" />
      </a>
      <figcaption>
        {similarMoviesAvailable ? "" : "No hay data suficiente para darte pelílculas relacionadas."}
      </figcaption>
    </figure>
    <p id="summary">{movie.overview === null ? "Loading"
      : movie.overview === "" ? "Resumen no disponible."
        : movie.overview}
    </p>
    <WhereToWatch watchProviders={watchProviders} />
  </div>


}