import styles from "./styles.module.scss";
import {useNavigate} from "react-router";
import {Photo} from "../../types";

export default function ListItem({
  id,
  title,
  thumbnailUrl,
}: Photo) {
  const navigate = useNavigate();

  const navigateToImage = () => {
    navigate(`/photos/${id}`);
  }

  return (
    <div
      className={styles.listItem}
    >
      <span
        className={styles.listItemTitle}
      >
        {title}
      </span>
      <img
        onClick={navigateToImage}
        className={styles.listItemImg}
        src={thumbnailUrl}
        alt={title}
      />
    </div>
  )
}