import type { UserTitle } from "../../api";

export function UserTitleCardSquare({ title }: { title: UserTitle }) {
  return (
    <div style={{
      width: 160,
      border: "1px solid #ddd",
      padding: 8,
      borderRadius: 8,
      textAlign: "center"
    }}>
      {title.title?.poster?.image_path && (
        <img src={title.title?.poster.image_path} width={140} />
      )}
      <div>
        <h4>{title.title?.title_names["en"]}</h4>
        <h5>{title.status}</h5>
        <small>{title.title?.release_year} • {title.title?.rating}</small>
      </div>
    </div>
  );
}