import React from "react";
import type { Product } from "../../types/product";
import styles from "./Catalog.module.css";
import { useNavigate } from "react-router-dom";

interface Props {
    product: Product;
}

const ProductCard: React.FC<Props> = ({ product }) => {
  const navigate = useNavigate();

  return (
    <div 
      className={styles.card}
      onClick={() => navigate(`/product/${product.id}`)}
    >
      <img src={product.image} alt={product.name} />
      <p className={styles.name}>{product.name}</p>
      <button className={styles.plus}>+</button>
    </div>
  );
};

export default ProductCard;