import { SectionCard, SectionHeading } from '@overdeck/deck-ui'
import { GALLERY_REGISTRY, type GalleryDomain } from './gallery-registry'

const DOMAIN_ORDER: GalleryDomain[] = ['tables', 'chips', 'forensics', 'agent', 'offload', 'overlays', 'inputs', 'layout']

export function DesignSystemGallery() {
  return (
    <div className="flex flex-col gap-6" data-design-system-gallery data-gallery-count={GALLERY_REGISTRY.length}>
      <SectionCard title="Fixture scope">
        Static fixture gallery. Values below are examples, never live collector data.
      </SectionCard>
      {DOMAIN_ORDER.map((domain) => {
        const entries = GALLERY_REGISTRY.filter((entry) => entry.domain === domain)
        if (entries.length === 0) return null
        return (
          <section key={domain} aria-labelledby={`gallery-${domain}`}>
            <div id={`gallery-${domain}`}>
              <SectionHeading title={domain} subtitle={`· ${entries.length} registered`} />
            </div>
            <div className="grid grid-cols-1 gap-4 xl:grid-cols-2">
              {entries.map((entry) => (
                <div key={entry.name} data-gallery-id={entry.name}>
                  <SectionCard title={entry.name}>{entry.render()}</SectionCard>
                </div>
              ))}
            </div>
          </section>
        )
      })}
    </div>
  )
}