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

export default function ArtworkMeta({ artwork }) {
  const publisher = artwork?.publisher || null
  const credits = artwork?.credits || {}
  const primaryAuthor = credits?.primary_author || artwork?.user || null
  const contributors = Array.isArray(credits?.contributors) ? credits.contributors : []

  return (
    <div>
      <h1 className="text-2xl font-bold tracking-tight text-white sm:text-3xl">{artwork?.title}</h1>
      <div className="mt-4 flex flex-wrap gap-3 text-sm text-slate-300">
        {publisher?.type === 'group' ? (
          <a href={publisher.profile_url} className="inline-flex items-center gap-2 rounded-full border border-sky-300/20 bg-sky-300/10 px-3 py-1.5 text-sky-100 transition hover:border-sky-300/35 hover:bg-sky-300/15">
            <span className="text-[11px] font-semibold uppercase tracking-[0.18em] text-sky-100/80">Published by</span>
            <span className="font-semibold">{publisher.name}</span>
          </a>
        ) : null}
        {primaryAuthor ? (
          <span className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-3 py-1.5">
            <span className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400">Primary author</span>
            {primaryAuthor.profile_url ? <a href={primaryAuthor.profile_url} className="font-semibold text-white hover:text-sky-200">{primaryAuthor.name || primaryAuthor.username}</a> : <span className="font-semibold text-white">{primaryAuthor.name || primaryAuthor.username}</span>}
          </span>
        ) : null}
        {contributors.length > 0 ? (
          <div className="flex flex-wrap gap-2">
            <span className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-3 py-1.5 text-white">
              <span className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400">Contributors</span>
            </span>
            {contributors.map((item) => {
              const label = item.name || item.username

              return (
                <span key={item.id || label} className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-3 py-1.5 text-white">
                  {item.profile_url ? <a href={item.profile_url} className="font-semibold text-white hover:text-sky-200">{label}</a> : <span className="font-semibold text-white">{label}</span>}
                  {item.credit_role ? <span className="text-slate-400">{item.credit_role}</span> : null}
                  {item.is_primary ? <span className="rounded-full border border-emerald-300/30 bg-emerald-400/12 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.16em] text-emerald-100">Lead support</span> : null}
                </span>
              )
            })}
          </div>
        ) : null}
      </div>
      <div className="mt-3">
        <ArtworkBreadcrumbs artwork={artwork} />
      </div>
    </div>
  )
}