'use client'

import * as React from 'react'
import { cn } from '@/lib/utils'
import { Property } from '@/lib/types'
import { PropertyCard } from './property-card'

interface PropertyGridProps {
  properties: Property[]
  onSelectProperty?: (property: Property) => void
  className?: string
}

export function PropertyGrid({ properties, onSelectProperty, className }: PropertyGridProps) {
  const [favorites, setFavorites] = React.useState<Set<string>>(new Set())

  const toggleFavorite = (property: Property) => {
    setFavorites((prev) => {
      const next = new Set(prev)
      if (next.has(property.id)) {
        next.delete(property.id)
      } else {
        next.add(property.id)
      }
      return next
    })
  }

  if (properties.length === 0) {
    return (
      <div className={cn('text-center py-16', className)}>
        <div className="max-w-md mx-auto">
          <div className="size-16 rounded-full bg-muted flex items-center justify-center mx-auto mb-4">
            <svg className="size-8 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
            </svg>
          </div>
          <h3 className="text-lg font-semibold text-foreground mb-2">
            Nenhum imóvel encontrado
          </h3>
          <p className="text-muted-foreground text-sm">
            Tente ajustar os filtros de busca para encontrar mais opções de imóveis.
          </p>
        </div>
      </div>
    )
  }

  return (
    <div 
      className={cn(
        'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6',
        className
      )}
    >
      {properties.map((property) => (
        <PropertyCard
          key={property.id}
          property={property}
          onSelect={onSelectProperty}
          onFavorite={toggleFavorite}
          isFavorite={favorites.has(property.id)}
        />
      ))}
    </div>
  )
}