import React, { useEffect, useState } from 'react'
import ArtworkFormatBadges from './ArtworkFormatBadges'
const NUMBER_FORMATTER = new Intl.NumberFormat('en-US')
const ABSOLUTE_DATE_FORMATTER = new Intl.DateTimeFormat('en-US', {
year: 'numeric',
month: 'short',
day: 'numeric',
timeZone: 'UTC',
})
function formatCount(value) {
const n = Number(value || 0)
if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1).replace(/\.0$/, '')}M`
if (n >= 1_000) return `${(n / 1_000).toFixed(1).replace(/\.0$/, '')}k`
return NUMBER_FORMATTER.format(n)
}
function formatDate(value, useRelative = true) {
if (!value) return '—'
try {
const d = new Date(value)
if (!useRelative) return ABSOLUTE_DATE_FORMATTER.format(d)
const now = Date.now()
const diff = now - d.getTime()
const days = Math.floor(diff / 86_400_000)
if (days === 0) return 'Today'
if (days === 1) return 'Yesterday'
if (days < 30) return `${days} days ago`
return ABSOLUTE_DATE_FORMATTER.format(d)
} catch {
return '—'
}
}
/* ── Stat tile shown in the 2-col grid ─────────────────────────────────── */
function StatTile({ icon, label, value }) {
return (
{icon}
{value}
{label}
)
}
/* ── Key-value row ─────────────────────────────────────────────────────── */
function InfoRow({ label, value }) {
return (
{label}
{value}
)
}
export default function ArtworkDetailsPanel({ artwork, stats }) {
const [hydrated, setHydrated] = useState(false)
const width = artwork?.dimensions?.width || artwork?.width || 0
const height = artwork?.dimensions?.height || artwork?.height || 0
const resolution = width > 0 && height > 0 ? `${NUMBER_FORMATTER.format(width)} × ${NUMBER_FORMATTER.format(height)}` : null
useEffect(() => {
setHydrated(true)
}, [])
return (
{/* Stats grid */}
}
label="Views"
value={formatCount(stats?.views)}
/>
}
label="Downloads"
value={formatCount(stats?.downloads)}
/>
{/* Info rows */}
{resolution ? (
) : null}