import { FaEye } from "react-icons/fa";
import type { Movie, MovieDetail } from "../../../types";

interface CardMoviesListItemProps {
	movie: MovieDetail;
}

export default function CardMoviesListItem({ movie }: CardMoviesListItemProps) {
	return (
		<div
			className="cardshadow"
			style={{
				backgroundImage: `url(${movie.movie.poster_path})`,
				backgroundPosition: "center",
				backgroundSize: "cover",
				height: "320px",
				borderRadius: "5px",
			}}
		>
			<div style={{ height: "100%", width: "100%" }} className="movieitem">
				<div style={{ height: "100%" }} className="row justify-content-center">
					<div style={{ height: "100%" }} className="col align-self-center">
						<div style={{ height: "50%" }} className="row">
							<div className="col align-self-end">
								<h5 style={{ textAlign: "center", verticalAlign: "center" }}>
									{movie.movie.title}
								</h5>
							</div>
						</div>
						<div
							style={{ height: "50%" }}
							className="row justify-content-center"
						>
							<div className="col-8 align-self-center">
								<div className="d-grid">
									{movie.stats ? (
										<span className="badge text-bg-success mb-2">
											Disponible
										</span>
									) : (
										<span className="badge text-bg-secondary mb-2">
											Bientot dispo.
										</span>
									)}

									<br />
									<a
										href={`/home/movies/${movie.movie.id}`}
										className="btn btn-primary"
									>
										<FaEye />
									</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	);
}