import React, { useState } from 'react'
import { Link } from 'react-router-dom'

export default function CategoryCard({ category }) {
  const [imageError, setImageError] = useState(false)
  const fallbackImage = `https://via.placeholder.com/300x300?text=${encodeURIComponent(category.name)}`
  const categoryImage = (category.image && !imageError) ? category.image : fallbackImage

  return (
    <Link to={`/products?category=${category.slug}`} className="category-card">
      <img 
        src={categoryImage} 
        alt={category.name}
        onError={() => setImageError(true)}
      />
      <h3>{category.name}</h3>
      <p>{category.description}</p>
    </Link>
  )
}
