'use client'

import type * as React from 'react'
import type { AdminMedia } from '@admin/types'
import { cn } from '@admin/utils/shared/cn'
import { MediaGridItem } from './media-grid-item'

interface MediaGridProps extends React.ComponentPropsWithRef<'div'> {
  items: AdminMedia[]
  selectedIds: { has(key: string): boolean }
  isSelectMode?: boolean
  onItemClick: (item: AdminMedia) => void
}

export function MediaGrid({
  items,
  selectedIds,
  onItemClick,
  isSelectMode,
  className
}: MediaGridProps) {
  return (
    <div
      className={cn(
        'grid min-h-0 w-full flex-1 auto-rows-max grid-cols-6 content-start items-start gap-3 overflow-auto',
        className
      )}
    >
      {items.map((item) => {
        const isSelected = selectedIds.has(item.id)

        return (
          <MediaGridItem
            isSelectMode={isSelectMode}
            key={item.id}
            item={item}
            selected={isSelectMode && isSelected}
            onClick={onItemClick}
          />
        )
      })}
    </div>
  )
}