import React from 'react'
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 n.toLocaleString()
}
function formatDate(value) {
if (!value) return '—'
try {
const d = new Date(value)
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 d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })
} 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 width = artwork?.dimensions?.width || artwork?.width || 0
const height = artwork?.dimensions?.height || artwork?.height || 0
const resolution = width > 0 && height > 0 ? `${width.toLocaleString()} × ${height.toLocaleString()}` : null
return (
{/* Stats grid */}
}
label="Views"
value={formatCount(stats?.views)}
/>
}
label="Downloads"
value={formatCount(stats?.downloads)}
/>
{/* Info rows */}
{resolution && }
)
}