"use client"; import { useState } from "react"; import { useTranslations } from "next-intl"; import { ImageIcon, AlertTriangle } from "lucide-react"; import { AudioPlayer } from "./audio-player"; import { UserExamplesGallery } from "./user-examples-gallery"; interface UserExample { id: string; mediaUrl: string; comment: string | null; createdAt: string; user: { id: string; username: string; name: string | null; avatar: string | null; }; } interface MediaPreviewWithExamplesProps { mediaUrl: string; title: string; type: string; promptId: string; currentUserId?: string; isAdmin?: boolean; refreshTrigger?: number; renderAddButton?: (asThumbnail: boolean) => React.ReactNode; } export function MediaPreviewWithExamples({ mediaUrl, title, type, promptId, currentUserId, isAdmin, refreshTrigger = 0, renderAddButton, }: MediaPreviewWithExamplesProps) { const t = useTranslations("prompts"); const [hasError, setHasError] = useState(false); const [selectedExample, setSelectedExample] = useState(null); const handleSelectExample = (example: UserExample | null) => { setSelectedExample(example); setHasError(false); }; const displayUrl = selectedExample?.mediaUrl || mediaUrl; const displayTitle = selectedExample?.comment || title; const isShowingExample = !!selectedExample; const supportsExamples = type === "IMAGE" || type === "VIDEO"; if (hasError && !isShowingExample) { return (

{t("mediaLoadError")}

{t("mediaUnavailable")}

{supportsExamples && ( )}

); } return (

{type === "VIDEO" ? (

); }