import React from 'react';
import { Product } from '../types/types';
import { Link } from 'react-router-dom';
import './ProductList.css';

type ProductListProps = {
  products: Product[];
  category: 'food' | 'drinks';
};

const ProductList: React.FC<ProductListProps> = ({ products, category }) => {
  // Sort products by name alphabetically
  const sortedProducts = [...products].sort((a, b) => 
    a.name.localeCompare(b.name)
  );
  
  return (
    <div className="product-list">
      {sortedProducts.map(product => (
        <Link 
          to={`/product/${category}/${product.id}`} 
          key={product.id} 
          className="product-item"
          style={product.color ? { backgroundColor: `${product.color}80` } : {}}
        >
          <div className="product-name">{product.name}</div>
          <div className="product-price">{product.basePrice.toFixed(2)} €</div>
        </Link>
      ))}
    </div>
  );
};

export default ProductList;