'use client';

import Link from 'next/link';
import { Product } from '@/lib/data';

interface ProductListProps {
  products: Product[];
  locale?: 'de' | 'en';
}

export function ProductList({ products, locale = 'de' }: ProductListProps) {
  if (products.length === 0) {
    return (
      <div className="text-center py-8 text-gray-500">
        {locale === 'de' ? 'Keine Produkte gefunden' : 'No products found'}
      </div>
    );
  }

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      {products.map((product) => (
        <Link
          key={product.id}
          href={product.path}
          className="group block bg-white rounded-lg border border-gray-200 overflow-hidden hover:shadow-lg transition-shadow"
        >
          {product.featuredImage && (
            <div className="aspect-video bg-gray-100 overflow-hidden">
              <img
                src={product.featuredImage}
                alt={product.name}
                className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200"
                loading="lazy"
              />
            </div>
          )}
          <div className="p-4">
            <h3 className="font-semibold text-lg mb-2 text-gray-900 group-hover:text-blue-600 transition-colors">
              {product.name}
            </h3>
            {product.shortDescriptionHtml && (
              <div
                className="text-sm text-gray-600 mb-3 line-clamp-2"
                dangerouslySetInnerHTML={{ __html: product.shortDescriptionHtml }}
              />
            )}
            <div className="flex items-center justify-between">
              <div className="flex gap-2">
                {product.regularPrice && (
                  <span className={`font-bold ${product.salePrice ? 'text-gray-400 line-through text-sm' : 'text-blue-600'}`}>
                    {product.regularPrice}
                  </span>
                )}
                {product.salePrice && (
                  <span className="font-bold text-red-600">
                    {product.salePrice}
                  </span>
                )}
              </div>
              {product.stockStatus && (
                <span className={`text-xs px-2 py-1 rounded ${
                  product.stockStatus === 'instock'
                    ? 'bg-green-100 text-green-800'
                    : 'bg-red-100 text-red-800'
                }`}>
                  {product.stockStatus === 'instock'
                    ? (locale === 'de' ? 'Auf Lager' : 'In Stock')
                    : (locale === 'de' ? 'Nicht auf Lager' : 'Out of Stock')}
                </span>
              )}
            </div>
          </div>
        </Link>
      ))}
    </div>
  );
}