import React from 'react'

/**
 * TabCollections
 * Collections feature placeholder.
 */
export default function TabCollections({ collections }) {
  if (collections?.length > 0) {
    return (
      <div
        id="tabpanel-collections"
        role="tabpanel"
        aria-labelledby="tab-collections"
        className="pt-6"
      >
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
          {collections.map((col) => (
            <div
              key={col.id}
              className="bg-white/4 ring-1 ring-white/10 rounded-2xl overflow-hidden group hover:ring-sky-400/30 transition-all cursor-pointer shadow-xl shadow-black/20"
            >
              {col.cover_image ? (
                <div className="aspect-video overflow-hidden bg-black/30">
                  <img
                    src={col.cover_image}
                    alt={col.title}
                    className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
                    loading="lazy"
                  />
                </div>
              ) : (
                <div className="aspect-video bg-white/5 flex items-center justify-center text-slate-600">
                  <i className="fa-solid fa-layer-group text-3xl" />
                </div>
              )}
              <div className="p-4">
                <h3 className="font-semibold text-white truncate">{col.title}</h3>
                <p className="text-sm text-slate-500 mt-0.5">{col.items_count ?? 0} artworks</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    )
  }

  return (
    <div
      id="tabpanel-collections"
      role="tabpanel"
      aria-labelledby="tab-collections"
      className="pt-6"
    >
      <div className="bg-white/4 ring-1 ring-white/10 rounded-2xl px-8 py-16 text-center shadow-xl shadow-black/20 backdrop-blur">
        <div className="w-20 h-20 rounded-2xl bg-white/5 flex items-center justify-center mx-auto mb-5 text-slate-500">
          <i className="fa-solid fa-layer-group text-3xl" />
        </div>
        <h3 className="text-lg font-bold text-white mb-2">Collections Coming Soon</h3>
        <p className="text-slate-500 text-sm max-w-sm mx-auto">
          Group your artworks into curated collections.
        </p>
      </div>
    </div>
  )
}