movie-explorer/src/objects/sidebar.tsx

import React from "react";
import { Movie } from "./movie-wall";
import tmdb from "./tmdb";
import { WatchProviders, WhereToWatch } from "./whereToWatch";
import CrossfadeImage from 'react-crossfade-image'
import { Config } from "../App";

export interface SidebarProps extends React.ComponentPropsWithRef<"div"> {
  movie: Movie;
  similarMoviesAvailable: boolean;
  watchProviders: WatchProviders;
  config: Config;
  className: string
}
export function Sidebar({ movie, similarMoviesAvailable, watchProviders, config, className }: SidebarProps) {
  const apology = config.language == "es" ?
    "Resumen no disponible" :
    config.language == "en" ?
      "Summary unavailable." :
      ""
  return <div id="sidebar" className={className}>
    <div className="sm:h-14 w-fit flex justify-center items-center">
      <h1 className="font-bold text-base sm:text-lg sm:text-wrap my-1 sm:my-4 overflow-hidden text-center text-balance">{movie?.title ?? "loading"}</h1>
    </div>
    <div className="flex flex-row sm:flex-col gap-2 justify-center sm:items-center">
      <a href={tmdb.makeMovieLink(movie)} target="_blank" rel="noopener noreferrer" className="h-32 sm:h-96 aspect-poster flex justify-center">
        <CrossfadeImage src={tmdb.makeImgUrl(movie.poster_path ?? "")} style={{
          objectFit: "clip",
          height: "100%",
          apectRatio: "2 / 3"
        }} />
      </a>
      {similarMoviesAvailable ? "" : "No hay data suficiente para darte pelílculas relacionadas."}
      <div className="h-32 sm:h-72 w-64 sm:w-full overflow-y-scroll overflow-x-hidden sm:mt-4 p-2 sm:p-4 text-sm sm:text-base flex justify-center items-center border-2 border-slate-800 rounded-lg ">
        {/* TODO: make the apology vertically centered */}
        {movie.overview === null ?
          <p>Loading...</p>
          : movie.overview === "" ?
            <p>{apology}</p>
            :
            <p className="self-start">{movie.overview}</p>
        }
      </div>
    </div>
    <WhereToWatch watchProviders={watchProviders} config={config} className="w-full h-16 sm:h-32 flex flex-col justify-center mb-1 sm:mb-4 text-xs sm:text-base" />
  </div >


}