import React from "react";
import { motion } from "framer-motion";
import { cn } from "@/lib/utils";

interface ToggleSwitchProps {
  isActive: boolean;
  onChange: (value: boolean) => void;
  disabled?: boolean;
  label?: string;
}

const ToggleSwitch: React.FC<ToggleSwitchProps> = ({
  isActive,
  onChange,
  disabled = false,
  label,
}) => {
  return (
    <div className="flex items-center gap-3">
      <button
        type="button"
        role="switch"
        aria-checked={isActive}
        onClick={() => !disabled && onChange(!isActive)}
        disabled={disabled}
        className={cn(
          "relative flex items-center rounded-full p-1 cursor-pointer transition-colors duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-[#007E45] focus:ring-offset-2 dark:focus:ring-offset-gray-900",
          isActive ? "bg-[#007E45]" : "bg-gray-200 dark:bg-gray-700",
          disabled && "opacity-50 cursor-not-allowed"
        )}
        style={{ width: "60px", height: "32px" }}
      >
        <motion.div
          className="bg-white rounded-full shadow-sm"
          layout
          transition={{
            type: "spring",
            stiffness: 700,
            damping: 30,
          }}
          animate={{
            x: isActive ? 28 : 0,
          }}
          style={{ width: "28px", height: "28px" }}
        />
      </button>

      {label ? (
        <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
          {label}
        </span>
      ) : (
        <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
          {isActive ? "Actif" : "Inactif"}
        </span>
      )}
    </div>
  );
};

export default ToggleSwitch;
