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

export default function StudioGroupCollections() {
  const { props } = usePage()

  return (
    <StudioLayout title={props.title} subtitle={props.description}>
      <div className="mb-6 rounded-[28px] border border-sky-300/20 bg-sky-300/10 p-5 text-sky-100">
        <p className="text-[11px] font-semibold uppercase tracking-[0.18em]">Shared curation</p>
        <h2 className="mt-2 text-xl font-semibold">Create collections for {props.studioGroup?.name}</h2>
        <a href={props.createUrl} className="mt-4 inline-flex rounded-full border border-sky-200/20 bg-sky-200/10 px-4 py-2 text-sm font-semibold text-sky-50">New group collection</a>
      </div>
      <StudioContentBrowser listing={props.listing} quickCreate={[{ key: 'collections', label: 'Collection', icon: 'fa-solid fa-layer-group', url: props.createUrl }]} hideModuleFilter />
    </StudioLayout>
  )
}