'use client'

import React from 'react'
import ObjectCard, { ObjectData } from './ObjectCard'

interface ObjectGalleryProps {
  objects: ObjectData[]
  title?: string
  onObjectSelect?: (objectId: string) => void
  selectedObjectId?: string | null
  className?: string
}

const ObjectGallery: React.FC<ObjectGalleryProps> = ({
  objects,
  title = 'Объекты',
  onObjectSelect,
  selectedObjectId,
  className = ''
}) => {

  const handleObjectSelect = (objectId: string) => {
    if (onObjectSelect) {
      onObjectSelect(objectId)
    }
  }

  return (
    <div className={`w-full ${className}`}>
      {/* Галерея объектов */}
      {objects.length > 0 ? (
        <section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[18px] w-full">
          {objects.map((object) => (
            <ObjectCard
              key={object.object_id}
              object={object}
              onSelect={handleObjectSelect}
              isSelected={selectedObjectId === object.object_id}
            />
          ))}
        </section>
      ) : (
        <div className="flex items-center justify-center h-64 w-full">
          <div className="text-center">
            <div className="text-[#71717a] mb-2">
              <svg className="w-12 h-12 mx-auto" fill="currentColor" viewBox="0 0 24 24">
                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
              </svg>
            </div>
            <h3 className="text-lg font-medium text-white mb-2">Объекты не найдены</h3>
            <p className="text-[#71717a]">Нет доступных объектов</p>
          </div>
        </div>
      )}
    </div>
  )
}

export default ObjectGallery
export type { ObjectGalleryProps }