src/app/components/interview/PhaseToggle.tsx

import { BrainCircuit, BarChart2 } from "lucide-react";

export type Phase = "interview" | "analytics";

interface PhaseToggleProps {
  phase: Phase;
  onChange: (phase: Phase) => void;
  disabled?: boolean;
}

export default function PhaseToggle({ phase, onChange, disabled }: PhaseToggleProps) {
  return (
    <div
      className="flex items-center bg-slate-100 rounded-full p-0.5 text-xs select-none"
      title={disabled ? "Interview sedang berlangsung" : undefined}
    >
      <button
        onClick={() => !disabled && onChange("interview")}
        className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full transition-all duration-200 ${
          phase === "interview"
            ? "bg-white text-emerald-700 shadow-sm font-medium"
            : "text-slate-500 hover:text-slate-700"
        } ${disabled && phase !== "interview" ? "opacity-40 cursor-not-allowed" : "cursor-pointer"}`}
      >
        <BrainCircuit className="w-3.5 h-3.5" />
        <span>Interview</span>
      </button>
      <button
        onClick={() => !disabled && onChange("analytics")}
        className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full transition-all duration-200 ${
          phase === "analytics"
            ? "bg-white text-blue-700 shadow-sm font-medium"
            : "text-slate-500 hover:text-slate-700"
        } ${disabled && phase !== "analytics" ? "opacity-40 cursor-not-allowed" : "cursor-pointer"}`}
      >
        <BarChart2 className="w-3.5 h-3.5" />
        <span>Analytics</span>
      </button>
    </div>
  );
}