"use client";

export function ToggleSwitch({
  checked,
  disabled,
  onChange,
  onLabel = "فعال",
  offLabel = "غیرفعال",
}: {
  checked: boolean;
  disabled?: boolean;
  onChange: () => void;
  onLabel?: string;
  offLabel?: string;
}) {
  return (
    <button
      type="button"
      role="switch"
      aria-checked={checked}
      disabled={disabled}
      onClick={onChange}
      className="inline-flex flex-col items-center gap-1 disabled:cursor-not-allowed disabled:opacity-60"
    >
      <span
        className={`relative inline-flex h-6 w-11 shrink-0 rounded-full transition-colors ${
          checked ? "bg-emerald-600" : "bg-slate-200"
        }`}
      >
        <span
          className={`absolute top-0.5 h-5 w-5 rounded-full bg-white shadow-sm transition-all ${
            checked ? "right-0.5" : "left-0.5"
          }`}
        />
      </span>
      <span className={`text-[11px] font-semibold ${checked ? "text-emerald-700" : "text-slate-400"}`}>
        {checked ? onLabel : offLabel}
      </span>
    </button>
  );
}