"use client";

import { useState, type ReactNode } from "react";
import { ClientKanban } from "./ClientKanban";
import type { ClientView } from "@/lib/client-view";

export function PhaseViewToggle({
  timelineView,
  phases,
  token,
}: {
  timelineView: ReactNode;
  phases: ClientView["phases"];
  token: string;
}) {
  const [view, setView] = useState<"timeline" | "kanban">("timeline");

  return (
    <div>
      <div className="flex items-center justify-between mb-6">
        <h2 className="text-xl font-bold text-[#1a1a1a]">Fasi del Progetto</h2>
        <div className="flex items-center gap-1 bg-[#f4f4f5] rounded-lg p-1">
          <button
            onClick={() => setView("timeline")}
            className={`px-3 py-1.5 rounded-md text-xs font-semibold transition-all ${
              view === "timeline" ? "bg-white text-[#1A463C] shadow-sm" : "text-[#71717a] hover:text-[#1a1a1a]"
            }`}
          >
            Timeline
          </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>
      </div>

      {view === "timeline" ? timelineView : <ClientKanban phases={phases} token={token} />}
    </div>
  );
}