Arc Corner Slider Curved Toggle

"use client";

import React, { useState } from "react";
import { motion } from "framer-motion";

export interface ArcCornerToggleProps {
  isActive?: boolean;
  onToggle?: (active: boolean) => void;
  duration?: number;
  className?: string;
}

export function ArcCornerToggle({
  isActive: controlledActive,
  onToggle,
  duration = 0.65,
  className = "",
}: ArcCornerToggleProps) {
  const [internalActive, setInternalActive] = useState(false);
  const active = controlledActive !== undefined ? controlledActive : internalActive;

  const handleToggle = () => {
    const next = !active;
    if (controlledActive === undefined) setInternalActive(next);
    if (onToggle) onToggle(next);
  };

  return (
    <div
      onClick={handleToggle}
      className={`relative w-[280px] h-[280px] rounded-[40px] p-6 cursor-pointer select-none transition-colors duration-500 flex flex-col justify-between ${
        active
          ? "bg-gradient-to-br from-[#44516D] to-[#161B25] text-white shadow-2xl"
          : "bg-gradient-to-br from-[#F0F0F0] to-[#A3A3A1] text-gray-800 shadow-xl"
      } ${className}`}
    >
      <div className="flex justify-between items-center text-xs font-mono tracking-widest uppercase opacity-70">
        <span>{active ? "Dark Mode" : "Light Mode"}</span>
        <span>{active ? "ON" : "OFF"}</span>
      </div>

      {/* SVG Arc Track */}
      <div className="relative w-full h-[180px] flex items-center justify-center">
        <svg className="w-full h-full" viewBox="0 0 260 260" fill="none">
          <path
            d="M 34.5 34.5 H 48.91 A 185.589 185.589 0 0 1 234.5 220.089 V 234.5"
            stroke={active ? "rgba(255,255,255,0.2)" : "rgba(0,0,0,0.15)"}
            strokeWidth="38"
            strokeLinecap="round"
          />
        </svg>

        {/* Floating Knob */}
        <motion.div
          animate={{
            x: active ? 70 : -70,
            y: active ? 70 : -70,
          }}
          transition={{ type: "spring", stiffness: 350, damping: 26 }}
          className={`absolute w-12 h-12 rounded-full shadow-lg flex items-center justify-center ${
            active ? "bg-[#FF4081] text-white" : "bg-white text-gray-700"
          }`}
        >
          <span className="w-3 h-3 rounded-full bg-current" />
        </motion.div>
      </div>

      <div className="text-[11px] font-mono opacity-50 text-center">
        Click to toggle state
      </div>
    </div>
  );
}

export default ArcCornerToggle;