"use client"; /* eslint-disable @next/next/no-img-element -- registry components stay portable outside Next.js */ import { useState } from "react"; import { motion, useReducedMotion } from "motion/react"; type FlipRevealImageCardProps = { image?: { src: string; alt: string }; /** Shorthand for image.src. */ src?: string; /** Shorthand for image.alt. */ alt?: string; eyebrow?: string; title?: string; backTitle?: string; details?: string[]; hint?: string; /** Forces reduced motion in addition to the OS preference. */ reducedMotion?: boolean; className?: string; }; export function FlipRevealImageCard({ image, src, alt, eyebrow = "Spring collection", title = "Linen lounge chair", backTitle = "Details", details = ["Solid oak frame, oil finish", "Removable washed-linen cover", "Ships flat in 5 to 7 days"], hint = "Show details", reducedMotion = false, className = "", }: FlipRevealImageCardProps) { const shouldReduceMotion = Boolean(useReducedMotion()) || reducedMotion; const [flipped, setFlipped] = useState(false); const picture = image ?? (src ? { src, alt: alt ?? "" } : undefined); const face = "absolute inset-0 overflow-hidden rounded-2xl border border-zinc-200 [backface-visibility:hidden] dark:border-zinc-800"; return (

setFlipped((value) => !value)} animate={shouldReduceMotion ? { rotateY: 0 } : { rotateY: flipped ? 180 : 0 }} transition={{ duration: shouldReduceMotion ? 0 : 0.45, ease: "easeOut" }} className="relative block min-h-80 w-full rounded-2xl text-left [transform-style:preserve-3d] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-zinc-950 dark:focus-visible:outline-white" > {picture ? {picture.alt}

: null} {eyebrow} {title} {hint} {backTitle} {title} {details.map((detail) => ( ))}

); }