import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { CopyPromptButton } from './CopyPromptButton';
import { LikeButton } from './LikeButton';
import { MuxPlayer } from './MuxPlayer';
import { NewBackButton } from './NewBackButton';
import { Page } from './Page';
import { getAuthorName, getAvatarUrl, getRelativeTime } from './prompt-helpers';
export const PromptsShowPage = ({ promptSubmission }) => {
    const avatarUrl = getAvatarUrl(promptSubmission);
    const authorName = getAuthorName(promptSubmission);
    const authorLink = promptSubmission.githubUsername
        ? `https://github.com/${promptSubmission.githubUsername}`
        : promptSubmission.xUsername
            ? `https://x.com/${promptSubmission.xUsername}`
            : null;
    return (_jsx(Page, { className: "flex-col", children: _jsxs("div", { className: "m-auto max-w-[800px] w-full px-4 py-12", children: [_jsx(NewBackButton, { text: "Back to gallery", link: "/prompts" }), _jsx("div", { className: "h-1" }), _jsx("h1", { className: "text-2xl font-brand font-black", children: promptSubmission.title }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-3 mt-4 mb-4", children: [avatarUrl && (_jsx("img", { src: avatarUrl, width: 32, height: 32, className: "rounded-full", alt: authorName ? `${authorName}'s avatar` : 'Author avatar' })), _jsxs("div", { children: [_jsxs("div", { className: "text-sm font-brand", children: ["Prompted by", ' ', authorLink ? (_jsx("a", { href: authorLink, target: "_blank", rel: "noopener noreferrer", className: "font-medium hover:underline", children: authorName })) : (_jsx("span", { className: "font-medium", children: authorName }))] }), _jsx("div", { className: "text-xs text-muted-foreground font-brand", title: new Date(promptSubmission.createdAt).toLocaleString(), children: getRelativeTime(promptSubmission.createdAt) })] })] }), _jsxs("div", { children: [_jsx(MuxPlayer, { playbackId: promptSubmission.muxPlaybackId, title: promptSubmission.title, rounded: false }), promptSubmission.toolUsed && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "font-brand font-bold mt-6 mb-2", children: "Tool used" }), _jsx("p", { className: "text-sm font-brand", children: promptSubmission.toolUsed })] })), promptSubmission.modelUsed && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "font-brand font-bold mt-6 mb-2", children: "Model used" }), _jsx("p", { className: "text-sm font-brand", children: promptSubmission.modelUsed })] })), _jsx("h2", { className: "font-brand font-bold mt-6 mb-2", children: "Prompt" }), _jsx("pre", { className: "whitespace-pre-wrap text-sm rounded p-4 text-white", style: { backgroundColor: '#272A36' }, children: promptSubmission.prompt }), _jsxs("div", { className: "mt-6 flex items-center gap-2", children: [_jsx(LikeButton, { submissionId: promptSubmission.id, initialLikeCount: promptSubmission.likeCount }), _jsx(CopyPromptButton, { prompt: promptSubmission.prompt })] })] })] })] }) }));
};
