"use client";

import { useState, type ReactNode } from "react";
import { KanbanBoard } from "./KanbanBoard";
import type { ClientFullDetail } from "@/lib/admin-queries";

export function PhasesViewToggle({
  listView,
  phases,
  clientId,
}: {
  listView: ReactNode;
  phases: ClientFullDetail["phases"];
  clientId: string;
}) {
  const [view, setView] = useState<"list" | "kanban">("list");

  return (
    <div>
      <div className="flex items-center gap-1 mb-5 bg-[#f4f4f5] rounded-lg p-1 w-fit">
        <button
          onClick={() => setView("list")}
          className={`px-3 py-1.5 rounded-md text-xs font-semibold transition-all ${
            view === "list"
              ? "bg-white text-[#1A463C] shadow-sm"
              : "text-[#71717a] hover:text-[#1a1a1a]"
          }`}
        >
          Lista
        </button>
        <button
          onClick={() => setView("kanban")}
          className={`px-3 py-1.5 rounded-md text-xs font-semibold transition-all ${
            view === "kanban"
              ? "bg-white text-[#1A463C] shadow-sm"
              : "text-[#71717a] hover:text-[#1a1a1a]"
          }`}
        >
          Kanban
        </button>
      </div>

      {view === "list" ? (
        listView
      ) : (
        <KanbanBoard phases={phases} clientId={clientId} />
      )}
    </div>
  );
}