import React from 'react';
import Switch from '../ui/Switch';

/**
 * سوییچ وضعیت فعال/غیرفعال — معادل 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 }}>
      <span title={label}>
        <Switch checked={active} onChange={onToggle} disabled={disabled} ariaLabel={label} />
      </span>
      <span style={{ fontSize: 13, color: 'var(--text-2)' }}>{label}</span>
    </div>
  );
}