/**
 * PlaceholderImage — server component.
 *
 * Renders a styled placeholder div with a food/pizza SVG icon when a
 * menu item has no image assigned.
 *
 * Meets Req 2.4 (display placeholder when no image is assigned)
 *
 * @param {{ className?: string }} props
 */
export default function PlaceholderImage({ className = '' }) {
  return (
    <div
      className={`flex items-center justify-center bg-secondary-100 text-secondary-400 ${className}`}
      aria-hidden="true"
    >
      {/* Pizza / food icon */}
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        fill="currentColor"
        className="w-12 h-12 opacity-50"
        aria-hidden="true"
      >
        <path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm0 2a8 8 0 0 1 7.938 7H4.062A8 8 0 0 1 12 4zm-8 9h16a8 8 0 0 1-16 0z" />
        <circle cx="9" cy="9" r="1.25" />
        <circle cx="14" cy="7.5" r="1" />
        <circle cx="15.5" cy="11" r="1" />
        <circle cx="10" cy="11.5" r="1.25" />
      </svg>
    </div>
  );
}