"use client";
import { useState } from "react";
import { ListView } from "@/components/competitions/ListView";
import { CalendarView } from "@/components/competitions/CalendarView";

export default function CalendarioPage() {
  const [tab, setTab] = useState<"lista" | "calendario">("lista");
  return (
    <section aria-labelledby="cal-title">
      <h1 id="cal-title" className="text-2xl font-bold">Calendário de Competições</h1>
      <div className="mt-4" role="tablist" aria-label="Selecionar vista">
        <button
          role="tab"
          aria-selected={tab === "lista"}
          className="mr-2 border px-3 py-2"
          onClick={() => setTab("lista")}
        >
          Lista
        </button>
        <button
          role="tab"
          aria-selected={tab === "calendario"}
          className="border px-3 py-2"
          onClick={() => setTab("calendario")}
        >
          Calendário
        </button>
      </div>
      <div className="mt-4">
        {tab === "lista" ? <ListView /> : <CalendarView />}
      </div>
    </section>
  );
}
