import React from 'react'
import ArtworkBreadcrumbs from './ArtworkBreadcrumbs'

export default function ArtworkMeta({ artwork }) {
  const author = artwork?.user?.name || artwork?.user?.username || 'Artist'
  const publishedAt = artwork?.published_at
    ? new Date(artwork.published_at).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })
    : '—'
  const width = artwork?.dimensions?.width || 0
  const height = artwork?.dimensions?.height || 0

  return (
    <div className="rounded-xl border border-nova-700 bg-panel p-5">
      <h1 className="text-xl font-semibold text-white sm:text-2xl">{artwork?.title}</h1>
      <ArtworkBreadcrumbs artwork={artwork} />
      <dl className="mt-3 grid grid-cols-1 gap-3 text-sm text-soft sm:grid-cols-2">
        <div className="flex items-center justify-between gap-4 rounded-lg bg-nova-900/30 px-3 py-2">
          <dt>Author</dt>
          <dd className="text-white">{author}</dd>
        </div>
        <div className="flex items-center justify-between gap-4 rounded-lg bg-nova-900/30 px-3 py-2">
          <dt>Upload date</dt>
          <dd className="text-white">{publishedAt}</dd>
        </div>
        <div className="flex items-center justify-between gap-4 rounded-lg bg-nova-900/30 px-3 py-2 sm:col-span-2">
          <dt>Resolution</dt>
          <dd className="text-white">{width > 0 && height > 0 ? `${width} × ${height}` : '—'}</dd>
        </div>
      </dl>
    </div>
  )
}