import { getListings } from '@/lib/listings'
import { toMapPins } from '@/lib/map-pin'
import { AtlasExplorer } from '@/components/terrano/AtlasExplorer'
import { SectionHeader } from '@/components/terrano/SectionHeader'

export const dynamic = 'force-dynamic'

export default async function MapaPage() {
  const listings = await getListings({ verifiedOnly: false, sort: 'recientes' })
  const pins = toMapPins(listings)

  return (
    <div className="bleed" style={{ paddingTop: 32, paddingBottom: 48 }}>
      <SectionHeader
        kicker="Atlas satelital"
        title="Mapa de activos mineros"
      />
      <AtlasExplorer pins={pins} height={680} subtitle={`${pins.length} activos georreferenciados`} />
    </div>
  )
}