import React from 'react'
import type { Metadata } from 'next'
import { listApprovedSpots } from '@/lib/spots'
import { SpotsMapList } from '@/components/spots'
import './page.css'

export const dynamic = 'force-dynamic'

export const metadata: Metadata = {
  title: 'Spots de Voo — OndeVoar.pt',
  description: 'Descobre os melhores locais para voar drones em Portugal, avaliados pela comunidade.',
}

export default async function SpotsPage() {
  const { spots } = await listApprovedSpots({ take: 24 })

  return (
    <div className="spots-page">
      <div className="spots-header">
        <h1 className="spots-title">Spots de Voo</h1>
        <p className="spots-subtitle">Os melhores locais em Portugal, partilhados pela comunidade</p>
        <a href="/spots/novo" className="spots-submit-btn">+ Submeter Spot</a>
      </div>
      <div className="spots-content">
        <SpotsMapList
          spots={spots.map((s) => ({
            ...s,
            difficulty: s.difficulty as 'BEGINNER' | 'INTERMEDIATE' | 'ADVANCED' | 'EXPERT',
            tags: Array.isArray(s.tags) ? (s.tags as string[]) : [],
            avgRating: s.avgRating ?? null,
            reviewCount: s.reviewCount ?? 0,
          }))}
          emptyMessage="Ainda não há spots aprovados. Sê o primeiro a submeter!"
        />
      </div>
    </div>
  )
}