import React from "react";

export interface ToggleProps {
  /** Whether the toggle is checked */
  checked: boolean;
  /** Callback when the toggle changes */
  onChange: (checked: boolean) => void;
  /** Label displayed above the toggle */
  label: string;
  /** Optional description displayed below the label */
  description?: string;
  /** Optional additional class name */
  className?: string;
  /** Whether the toggle is disabled */
  disabled?: boolean;
}

/**
 * A reusable toggle switch component with label and description.
 */
export function Toggle({
  checked,
  onChange,
  label,
  description,
  className = "",
  disabled = false,
}: ToggleProps): React.ReactElement {
  return (
    <div
      className={`b3-wvs-flex b3-wvs-items-center b3-wvs-justify-between ${className}`}
    >
      <div>
        <label className="b3-wvs-block b3-wvs-text-sm b3-wvs-font-medium b3-wvs-text-gray-900">
          {label}
        </label>
        {description && (
          <p className="b3-wvs-text-xs b3-wvs-text-gray-500">{description}</p>
        )}
      </div>
      <button
        type="button"
        role="switch"
        aria-checked={checked}
        disabled={disabled}
        onClick={() => onChange(!checked)}
        className={`b3-wvs-toggle ${checked ? "is-checked" : ""}`}
      >
        <span className="b3-wvs-toggle-thumb" />
      </button>
    </div>
  );
}