/* eslint-disable react/prop-types */
import React, { useState } from "react";

export function ToggleSwitch({ value = true, onChange }) {
  const [isOn, setIsOn] = useState(value);

  const handleToggle = (newValue) => {
    setIsOn(newValue);
    onChange?.(newValue);
  };

  return (
    <div className="flex gap-2">
      <button
        onClick={() => handleToggle(true)}
        className={`px-8 py-3 rounded transition-colors transition-shadow relative overflow-hidden ${
          isOn
            ? `bg-primary text-[#1a1a1a] shadow-primary/40 shadow-[0_0_16px,inset_0_1px_2px_rgba(255,255,255,0.3)]`
            : `bg-[#1a1a1a] text-primary border-2 border-[#2a2a2a] shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)]`
        }`}
      >
        {!isOn && (
          <div className="absolute -top-1/4 left-0 right-0 h-3/4 bg-gradient-to-b from-white/[0.08] via-white/[0.02] to-transparent pointer-events-none blur-[2px]" />
        )}
        <span className="relative z-10">ON</span>
      </button>
      <button
        onClick={() => handleToggle(false)}
        className={`px-8 py-3 rounded transition-colors transition-shadow relative overflow-hidden ${
          !isOn
            ? `bg-primary text-[#1a1a1a] shadow-primary/40 shadow-[0_0_16px,inset_0_1px_2px_rgba(255,255,255,0.3)]`
            : `bg-[#1a1a1a] text-primary border-2 border-[#2a2a2a] shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)]`
        }`}
      >
        {isOn && (
          <div className="absolute -top-1/4 left-0 right-0 h-3/4 bg-gradient-to-b from-white/[0.08] via-white/[0.02] to-transparent pointer-events-none blur-[2px]" />
        )}
        <span className="relative z-10">OFF</span>
      </button>
    </div>
  );
}
