import React from 'react'

export default function ArtworkMediaStrip({ items = [], selectedId = null, onSelect }) {
  if (!Array.isArray(items) || items.length <= 1) {
    return null
  }

  return (
    <div className="mt-4 rounded-[1.75rem] border border-white/10 bg-[linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02))] p-4 shadow-[0_18px_60px_rgba(2,8,23,0.24)] backdrop-blur">
      <div className="mb-3 flex items-center justify-between gap-3">
        <div>
          <p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-white/45">Gallery</p>
          <p className="mt-1 text-sm text-white/60">Switch between the default cover and additional archive screenshots.</p>
        </div>
        <span className="rounded-full border border-white/10 bg-white/5 px-3 py-1 text-[11px] text-white/65">
          {items.length} views
        </span>
      </div>

      <div className="flex gap-3 overflow-x-auto pb-1">
        {items.map((item) => {
          const active = item.id === selectedId

          return (
            <button
              key={item.id}
              type="button"
              onClick={() => onSelect?.(item.id)}
              aria-pressed={active}
              className={[
                'group shrink-0 rounded-2xl border p-2 text-left transition-all',
                active
                  ? 'border-sky-300/45 bg-sky-400/12 shadow-[0_0_0_1px_rgba(56,189,248,0.18)]'
                  : 'border-white/10 bg-white/[0.03] hover:border-white/20 hover:bg-white/[0.06]',
              ].join(' ')}
            >
              <div className="h-20 w-28 overflow-hidden rounded-xl bg-black/30 ring-1 ring-white/10 sm:h-24 sm:w-36">
                {item.thumbUrl ? (
                  <img
                    src={item.thumbUrl}
                    alt={item.label}
                    className="h-full w-full object-cover transition duration-300 group-hover:scale-[1.03]"
                    loading="lazy"
                    decoding="async"
                  />
                ) : (
                  <div className="grid h-full w-full place-items-center text-white/30">
                    <svg className="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true">
                      <path strokeLinecap="round" strokeLinejoin="round" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                    </svg>
                  </div>
                )}
              </div>
              <div className="mt-2 flex items-center justify-between gap-2 px-1">
                <span className="truncate text-xs font-medium text-white/80">{item.label}</span>
                <span className={[
                  'rounded-full px-2 py-0.5 text-[10px]',
                  active ? 'bg-sky-300/20 text-sky-100' : 'bg-white/10 text-white/45',
                ].join(' ')}>
                  {active ? 'Showing' : 'View'}
                </span>
              </div>
            </button>
          )
        })}
      </div>
    </div>
  )
}