"use client"

import { useState } from "react"
import { cn } from "@/lib/utils"

interface ReportToggleProps {
  execView: React.ReactNode
  engView: React.ReactNode
}

export function ReportToggle({ execView, engView }: ReportToggleProps) {
  const [view, setView] = useState<"exec" | "eng">("exec")

  return (
    <>
      <div className="flex justify-center mt-10 mb-2">
        <div className="inline-flex rounded-xl border border-zinc-200 dark:border-zinc-800 bg-zinc-100 dark:bg-zinc-900 p-1">
          <button
            onClick={() => setView("exec")}
            className={cn(
              "rounded-lg px-6 py-2.5 text-sm font-semibold transition-all",
              view === "exec"
                ? "bg-amber-400 text-zinc-950 shadow-sm"
                : "text-zinc-500 dark:text-zinc-400 hover:text-zinc-800 dark:hover:text-zinc-200",
            )}
          >
            Executive Summary
          </button>
          <button
            onClick={() => setView("eng")}
            className={cn(
              "rounded-lg px-6 py-2.5 text-sm font-semibold transition-all",
              view === "eng"
                ? "bg-amber-400 text-zinc-950 shadow-sm"
                : "text-zinc-500 dark:text-zinc-400 hover:text-zinc-800 dark:hover:text-zinc-200",
            )}
          >
            Engineering Details
          </button>
        </div>
      </div>

      {view === "exec" ? execView : engView}
    </>
  )
}
