import React from "react";

interface KnockTypeToggleProps {
  knockT: string;
  setKnockT: (value: string) => void;
}

const KnockTypeToggle: React.FC<KnockTypeToggleProps> = ({ knockT, setKnockT }) => {
  const options = [
    { value: "", label: "Value", icon: "bx bx-dollar" },
    { value: "1", label: "Percentage", icon: "bx bx-percent" },
  ];

  return (
    <div className="flex gap-4 items-center">
      {options.map((opt) => (
        <label key={opt.value} className="flex items-center cursor-pointer space-x-2">
          {/* Hidden Radio Input */}
          <input
            type="radio"
            name="knock_t"
            value={opt.value}
            checked={knockT === opt.value}
            onChange={(e) => setKnockT(e.target.value)}
            className="sr-only"
          />
          {/* Custom Radio */}
          <span
            className={`
              w-5 h-5 flex items-center justify-center rounded-full border-2 transition-all duration-200
              ${knockT === opt.value
                ? "border-green-600 bg-green-600"
                : "border-gray-300 bg-white hover:border-gray-400"}
            `}
          >
            {/* Inner Dot for Selected */}
            {knockT === opt.value && <span className="w-2.5 h-2.5 bg-white rounded-full"></span>}
          </span>
          {/* Label with Icon */}
          <div className="flex items-center gap-1 text-sm text-gray-700 font-medium">
            <i className={`${opt.icon} text-sm`}></i>
            {opt.label}
          </div>
        </label>
      ))}
    </div>
  );
};

export default KnockTypeToggle;