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

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

  return (
    <StudioLayout title={props.title} subtitle={props.description}>
      <div className="flex items-center justify-between gap-3">
        <div className="text-sm text-slate-400">Events let the group announce launches, sessions, milestones, and time-based updates.</div>
        {props.createUrl ? <a href={props.createUrl} className="rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 text-sm font-semibold text-white">Create event</a> : null}
      </div>
      <div className="mt-6 grid gap-4 lg:grid-cols-2">
        {items.length > 0 ? items.map((event) => (
          <a key={event.id} href={event.urls?.edit || event.url} className="rounded-[24px] border border-white/10 bg-white/[0.03] p-5 transition hover:border-white/20">
            <div className="flex items-center justify-between gap-3">
              <h2 className="text-xl font-semibold text-white">{event.title}</h2>
              <span className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-300">{event.status}</span>
            </div>
            <p className="mt-3 text-sm leading-6 text-slate-400">{event.summary || 'Event page'}</p>
            <div className="mt-4 text-xs text-slate-500">{event.start_at ? new Date(event.start_at).toLocaleString() : 'Unscheduled'} • {event.event_type}</div>
          </a>
        )) : <div className="rounded-[24px] border border-dashed border-white/10 bg-white/[0.02] p-6 text-sm text-slate-400">No events yet.</div>}
      </div>
    </StudioLayout>
  )
}