import React from 'react'
import { usePage } from '@inertiajs/react'
import StudioLayout from '../../Layouts/StudioLayout'

export default function StudioGroupPosts() {
  const { props } = usePage()
  const items = Array.isArray(props.listing?.items) ? props.listing.items : []

  return (
    <StudioLayout title={props.title} subtitle={props.description}>
      <section className="rounded-[28px] border border-white/10 bg-white/[0.03] p-5">
        <div className="flex items-center justify-between gap-3">
          <div>
            <h2 className="text-xl font-semibold text-white">Post library</h2>
            <p className="mt-1 text-sm text-slate-400">Draft, publish, pin, and archive public group posts.</p>
          </div>
          {props.createUrl ? <a href={props.createUrl} className="rounded-full border border-sky-300/20 bg-sky-300/10 px-4 py-2 text-sm font-semibold text-sky-100">New post</a> : null}
        </div>

        <div className="mt-5 grid gap-4 md:grid-cols-2">
          {items.length > 0 ? items.map((item) => (
            <article key={item.id} className="rounded-[24px] border border-white/10 bg-black/20 p-4">
              <div className="flex items-start justify-between gap-3">
                <div>
                  <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">{item.type}</div>
                  <h3 className="mt-2 text-lg font-semibold text-white">{item.title}</h3>
                </div>
                <div className="flex flex-col items-end gap-2">
                  <span className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 text-xs font-semibold uppercase tracking-[0.16em] text-slate-300">{item.status}</span>
                  {item.is_pinned ? <span className="rounded-full border border-amber-300/20 bg-amber-400/10 px-3 py-1 text-xs font-semibold uppercase tracking-[0.16em] text-amber-100">Pinned</span> : null}
                </div>
              </div>
              <p className="mt-3 text-sm leading-6 text-slate-300">{item.excerpt || item.content || 'No excerpt yet.'}</p>
              <div className="mt-4 flex flex-wrap gap-2">
                <a href={item.urls?.edit} className="rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 text-sm font-semibold text-white">Edit</a>
                {item.urls?.public ? <a href={item.urls.public} className="rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 text-sm font-semibold text-white">View</a> : null}
              </div>
            </article>
          )) : <div className="rounded-[24px] border border-dashed border-white/10 bg-white/[0.02] p-5 text-sm text-slate-400">No posts yet.</div>}
        </div>
      </section>
    </StudioLayout>
  )
}