import { useId } from "react";

export default function Toggle({ checked, onChange, label, id, disabled, ariaLabel }) {
  // useId keeps the id stable across renders; Math.random() re-generated it on
  // every render and broke the label association.
  const generatedId = useId();
  const inputId = id || `toggle-${generatedId}`;
  return (
    <label
      htmlFor={inputId}
      className="inline-flex items-center gap-3 cursor-pointer group"
    >
      <span className="relative inline-flex h-6 w-11 flex-shrink-0 rounded-full focus-within:ring-2 focus-within:ring-gray-600 focus-within:ring-offset-2 has-[:disabled]:opacity-50 has-[:disabled]:cursor-not-allowed transition-all">
        <input
          id={inputId}
          type="checkbox"
          role="switch"
          checked={!!checked}
          onChange={(e) => onChange?.(e.target.checked)}
          disabled={disabled}
          className="sr-only peer"
          aria-checked={!!checked}
          aria-label={!label && ariaLabel ? ariaLabel : undefined}
        />
        <span className="absolute inset-0 rounded-full bg-gray-300 transition-all duration-200 peer-checked:bg-gray-800 peer-checked:shadow-md" />
        <span className="absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-white shadow-sm transition-transform duration-200 peer-checked:translate-x-5 pointer-events-none" />
      </span>
      {label && <span className="text-sm font-medium text-gray-700 group-hover:text-gray-900 transition-colors">{label}</span>}
    </label>
  );
}