"use client";

import { useState } from "react";

interface AvailableNowToggleProps {
  initialAvailable: boolean;
}

export default function AvailableNowToggle({ initialAvailable }: AvailableNowToggleProps) {
  const [available, setAvailable] = useState(initialAvailable);
  const [loading, setLoading] = useState(false);

  async function toggle() {
    setLoading(true);
    try {
      const res = await fetch("/api/profile/available-now", { method: "POST" });
      if (res.ok) {
        const data = await res.json();
        setAvailable(data.available);
      }
    } finally {
      setLoading(false);
    }
  }

  return (
    <button
      onClick={toggle}
      disabled={loading}
      className="flex items-center gap-3 bg-surface rounded-xl border border-surface-light p-4 hover:bg-surface-light transition-colors disabled:opacity-50 w-full"
    >
      <span
        className={`w-3 h-3 rounded-full flex-shrink-0 ${
          available ? "bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.6)]" : "bg-text-muted"
        }`}
      />
      <span className="text-sm font-medium text-text">
        {loading ? "Updating..." : available ? "Available Now" : "Set Available"}
      </span>
      {/* Toggle switch */}
      <div
        className={`ml-auto relative w-10 h-5 rounded-full transition-colors ${
          available ? "bg-green-500" : "bg-surface-light"
        }`}
      >
        <div
          className={`absolute top-0.5 w-4 h-4 rounded-full bg-white transition-transform ${
            available ? "translate-x-5" : "translate-x-0.5"
          }`}
        />
      </div>
    </button>
  );
}