import React from 'react'

export default function CollectionEmptyState({ isOwner, createUrl }) {
  const smartUrl = createUrl ? `${createUrl}?mode=smart` : null

  return (
    <div className="relative overflow-hidden rounded-[28px] border border-white/10 bg-[linear-gradient(135deg,rgba(56,189,248,0.08),rgba(255,255,255,0.04),rgba(249,115,22,0.1))] px-6 py-14 text-center shadow-[0_26px_80px_rgba(2,6,23,0.28)]">
      <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(56,189,248,0.12),transparent_32%),radial-gradient(circle_at_bottom_right,rgba(249,115,22,0.12),transparent_30%)]" />
      <div className="relative mx-auto max-w-xl">
        <div className="mx-auto mb-5 flex h-20 w-20 items-center justify-center rounded-[24px] border border-white/12 bg-white/[0.06] text-sky-200 shadow-[0_18px_40px_rgba(2,6,23,0.28)]">
          <i className="fa-solid fa-layer-group text-3xl" />
        </div>
        <h3 className="text-2xl font-semibold tracking-[-0.03em] text-white">
          {isOwner ? 'Create your first collection' : 'No public collections yet'}
        </h3>
        <p className="mx-auto mt-3 max-w-md text-sm leading-relaxed text-slate-300">
          {isOwner
            ? 'Collections turn your gallery into intentional showcases. Build them manually or let smart rules keep them fresh from your own artwork library.'
            : 'This creator has not published any collections.'}
        </p>
        {isOwner && createUrl ? (
          <div className="mt-6 flex flex-wrap items-center justify-center gap-3">
            <a
              href={createUrl}
              className="inline-flex items-center gap-2 rounded-2xl border border-sky-300/25 bg-sky-400/10 px-5 py-3 text-sm font-semibold text-sky-100 transition hover:bg-sky-400/15"
            >
              <i className="fa-solid fa-plus fa-fw" />
              Create Manual Collection
            </a>
            <a
              href={smartUrl || createUrl}
              className="inline-flex items-center gap-2 rounded-2xl border border-white/12 bg-white/[0.05] px-5 py-3 text-sm font-semibold text-white transition hover:bg-white/[0.08]"
            >
              <i className="fa-solid fa-wand-magic-sparkles fa-fw" />
              Create Smart Collection
            </a>
          </div>
        ) : null}
        {isOwner ? <p className="mx-auto mt-6 max-w-lg text-xs uppercase tracking-[0.18em] text-slate-400">Examples: Featured wallpapers, best of 2026, cyberpunk studies, blue neon universe</p> : null}
      </div>
    </div>
  )
}