"use client"

import Image from "next/image"
import { useState } from "react"

import { BrokenImage } from "@/components/broken-image"
import { cn } from "@/lib/utils"

/** Session-wide cache so known-404 URLs are never re-requested via next/image. */
const brokenImageUrls = new Set<string>()

export function MediaPreview({
  src,
  label,
  className,
}: {
  src: string
  label: string
  className?: string
}) {
  const trimmed = src.trim()
  const [failedSrc, setFailedSrc] = useState<string | null>(null)
  const isFailed =
    !trimmed || brokenImageUrls.has(trimmed) || failedSrc === trimmed

  if (isFailed) {
    return <BrokenImage label={label} className={className} />
  }

  return (
    <Image
      src={trimmed}
      alt={label}
      width={48}
      height={48}
      className={cn("bg-muted border rounded-md object-contain", className)}
      onError={() => {
        brokenImageUrls.add(trimmed)
        setFailedSrc(trimmed)
      }}
    />
  )
}