import React from 'react';

/**
 * سوییچ وضعیت فعال/غیرفعال — معادل MUI Switch مبدأ با دیزاین‌سیستم مقصد.
 * برچسب فعال/غیرفعال کنار سوییچ نمایش داده می‌شود (مثل مبدأ).
 */
export default function StatusToggle({
  active,
  onToggle,
  disabled,
}: {
  active: boolean;
  onToggle: () => void;
  disabled?: boolean;
}) {
  const label = active ? 'فعال' : 'غیرفعال';
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      <label className="switch" title={label}>
        <input
          type="checkbox"
          checked={active}
          onChange={onToggle}
          disabled={disabled}
          aria-label={label}
        />
        <span className="switch-track"><span className="switch-thumb" /></span>
      </label>
      <span style={{ fontSize: 13, color: 'var(--text-2)' }}>{label}</span>
    </div>
  );
}