"use client"

import { useState } from "react"

export function PhotoPreview({ photo, alt }: { photo: { url: string; fallback?: string }; alt: string }) {
  const [failed, setFailed] = useState(false)

  // Signed storage URLs must bypass Next's image optimizer and remote-host allowlist.
  // eslint-disable-next-line @next/next/no-img-element
  return <div className="relative flex aspect-video items-center justify-center overflow-hidden border border-wedding-line bg-wedding-cream"><img src={photo.url} alt={alt} onError={() => setFailed(true)} className={`size-full object-contain ${failed ? "hidden" : ""}`} referrerPolicy="no-referrer" />{failed ? <p className="px-6 text-center font-wedding-ui text-sm text-wedding-ink">{photo.fallback ?? alt}</p> : null}</div>
}