"use client";
import React, { useEffect, useState } from "react";

type Meet = { id: string; name: string; date?: string; location?: string; signupUrl?: string };

export function ListView() {
  const [meets, setMeets] = useState<Meet[]>([]);
  const [future, setFuture] = useState<Meet[]>([]);

  useEffect(() => {
    (async () => {
      const res = await fetch("/api/openpowerlifting/meets");
      const data = await res.json();
      setMeets(data.meets ?? []);
      const f = await fetch("/api/content?path=pt/competicoes/future.json");
      try {
        const json = await f.json();
        setFuture(json.events ?? []);
      } catch {}
    })();
  }, []);

  return (
    <section aria-labelledby="list-title">
      <h2 id="list-title" className="text-xl font-semibold">Lista de Competições</h2>
      <ul className="mt-2 space-y-2">
        {future.map((m) => (
          <li key={`future-${m.name}`} className="border p-3">
            <strong>{m.name}</strong>
            {m.date && <span className="ml-2">{m.date}</span>}
            {m.location && <span className="ml-2">— {m.location}</span>}
            {m.signupUrl && (
              <a className="ml-3 underline" href={m.signupUrl} target="_blank" rel="noopener noreferrer">Inscrição</a>
            )}
          </li>
        ))}
        {meets.map((m) => (
          <li key={m.id} className="border p-3">
            <strong>{m.name}</strong>
          </li>
        ))}
      </ul>
    </section>
  );
}
