import * as React from 'react';
import '../styles/index.css';

type CardProps = {
  id: string;
  title: string;
  description: string;
  price: number;
  category: string;
  imageUrl: string;
};

export const Card = ({ id, imageUrl, title, category, price, description }: CardProps) => {
  return (
    <div className="card-container">
      <div className="card-image-wrapper">
        <a href={`/products/${id}`}>
          <img src={imageUrl} alt="thumbnail" width={300} height={300} />
        </a>
      </div>
      <div>
        <h1>{title}</h1>
      </div>
      <div className="card-meta">
        <p>Category: {category}</p>
        <p>Price: {price}</p>
      </div>
      <div>
        <p>{description}</p>
      </div>
    </div>
  );
};