'use client';

import { useState } from 'react';

const PLACEHOLDER = '/images/product-placeholder.webp';

export default function ProductImageWithFallback({
  src,
  alt,
  className,
}: {
  src?: string | null;
  alt: string;
  className?: string;
}) {
  const [failed, setFailed] = useState(false);
  const imageSrc = !failed && src ? src : PLACEHOLDER;

  return (
    <img
      src={imageSrc}
      alt={alt}
      className={className}
      onError={() => setFailed(true)}
    />
  );
}