/**
 * تصویر محصول: اگر عکس واقعی آپلود شده باشد، همان عکس (با srcset و بارگذاری تنبل)،
 * وگرنه تصویر برداری ProductArt. همه جای سایت (کارت، سبد، سفارش، جستجو) از این کامپوننت استفاده می‌کنند.
 */
import { imageSrc, imageSrcSet, type ImageRef } from "@/lib/media";
import type { ProductShape } from "@/types/catalog";
import { ProductArt } from "./ProductArt";

interface Props {
  image?: ImageRef;
  shape: ProductShape;
  tone: string;
  label: string;
  /** متن جایگزین وقتی عکس alt ندارد */
  title?: string;
  className?: string;
  /** عرض نمایش برای انتخاب اندازه مناسب از srcset */
  sizes?: string;
  /** عکس بالای صفحه: بدون بارگذاری تنبل و با اولویت بالا (برای LCP) */
  priority?: boolean;
  view?: 0 | 1 | 2;
}

export function ProductVisual({ image, shape, tone, label, title, className, sizes = "(min-width: 768px) 25vw, 50vw", priority, view }: Props) {
  if (!image) return <ProductArt shape={shape} tone={tone} label={label} title={title} className={className} view={view} />;
  return (
    // eslint-disable-next-line @next/next/no-img-element -- اندازه‌ها از قبل ساخته شده‌اند؛ بهینه‌ساز Next لازم نیست
    <img
      src={imageSrc(image.url, 800)}
      srcSet={imageSrcSet(image.url)}
      sizes={sizes}
      alt={image.alt || title || ""}
      width={800}
      height={800}
      loading={priority ? "eager" : "lazy"}
      fetchPriority={priority ? "high" : undefined}
      decoding="async"
      className={`object-cover ${className ?? ""}`}
    />
  );
}