'use client'

import React, { useEffect, useState } from 'react'

interface NotamEntry { id: string; notamId: string; title: string; description: string }
interface NotamPanelProps { onClose: () => void }

export function NotamPanel({ onClose }: NotamPanelProps) {
  const [notams, setNotams] = useState<NotamEntry[]>([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    fetch('/api/notams')
      .then((r) => r.json())
      .then((d) => { setNotams(d.notams ?? []); setLoading(false) })
      .catch(() => setLoading(false))
  }, [])

  return (
    <div className="notam-panel">
      <div className="notam-panel-header">
        <span>NOTAMs Activos</span>
        <button onClick={onClose} style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: 16 }} aria-label="Fechar NOTAMs">✕</button>
      </div>
      {loading && <div style={{ padding: 'var(--ov-space-4)', fontSize: 'var(--ov-fs-sm)', color: 'var(--ov-slate)' }}>A carregar…</div>}
      {!loading && notams.length === 0 && <div style={{ padding: 'var(--ov-space-4)', fontSize: 'var(--ov-fs-sm)', color: 'var(--ov-slate)' }}>Sem NOTAMs activos</div>}
      {notams.map((n) => (
        <div key={n.id} className="notam-item">
          <div className="notam-id">{n.notamId}</div>
          <div className="notam-title">{n.title}</div>
          <div className="notam-desc">{n.description}</div>
        </div>
      ))}
    </div>
  )
}