"use client";

import "@google/model-viewer";
import { resolveMediaUrl } from "@/lib/api/client";

type MenuItemModelViewerProps = {
  modelUrl: string;
  posterUrl?: string | null;
  alt: string;
  className?: string;
};

export function MenuItemModelViewer({
  modelUrl,
  posterUrl,
  alt,
  className,
}: MenuItemModelViewerProps) {
  const src = resolveMediaUrl(modelUrl);
  const poster = posterUrl ? resolveMediaUrl(posterUrl) : undefined;
  if (!src) return null;

  return (
    // @ts-expect-error model-viewer is a custom element from @google/model-viewer
    <model-viewer
      src={src}
      poster={poster}
      alt={alt}
      camera-controls
      touch-action="pan-y"
      auto-rotate
      rotation-per-second="28deg"
      interaction-prompt="none"
      shadow-intensity="1"
      exposure="1"
      environment-image="neutral"
      className={className}
      style={{ width: "100%", height: "100%", minHeight: "min(72vh, 420px)" }}
    />
  );
}