import Toggle from '../UI/Toggle';

function GeneralSettings({ settings, onChange }) {
  return (
    <div className="space-y-5">
      <div>
        <h3 className="text-base font-semibold text-slate-900 mb-0.5">General Settings</h3>
        <p className="text-sm text-slate-500">Configure how RescueFill captures and tracks form leads.</p>
      </div>

      <div className="bg-white rounded-xl border border-slate-200 divide-y divide-slate-100">
        {/* Enable Tracking */}
        <div className="p-5">
          <Toggle
            id="ls-enabled"
            label="Enable Lead Tracking"
            helpText="When enabled, RescueFill will automatically track form submissions on your site."
            checked={!!settings.enabled}
            onChange={(value) => onChange('enabled', value)}
          />
        </div>

        {/* Inactivity Threshold */}
        <div className="p-5">
          <div className="flex items-start justify-between gap-4">
            <div className="flex-1">
              <label htmlFor="ls-inactivity" className="block text-sm font-semibold text-slate-800 mb-0.5">
                Inactivity Threshold
                <span className="text-slate-400 font-normal ml-1.5 text-xs">(minutes)</span>
              </label>
              <p className="text-xs text-slate-500">Consider a lead abandoned after this many minutes of inactivity.</p>
            </div>
            <input
              id="ls-inactivity"
              type="number"
              min="5"
              max="1440"
              value={settings.inactivityThreshold}
              onChange={(e) => onChange('inactivityThreshold', parseInt(e.target.value) || 30)}
              className="w-24 px-3 py-2 text-sm border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500 text-center font-semibold"
            />
          </div>
        </div>

        {/* Save Interval */}
        <div className="p-5">
          <div className="flex items-start justify-between gap-4">
            <div className="flex-1">
              <label htmlFor="ls-interval" className="block text-sm font-semibold text-slate-800 mb-0.5">
                Save Interval
                <span className="text-slate-400 font-normal ml-1.5 text-xs">(seconds)</span>
              </label>
              <p className="text-xs text-slate-500">How often to save form data as visitor types (debounce delay).</p>
            </div>
            <input
              id="ls-interval"
              type="number"
              min="2"
              max="60"
              value={settings.saveInterval}
              onChange={(e) => onChange('saveInterval', parseInt(e.target.value) || 5)}
              className="w-24 px-3 py-2 text-sm border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500 text-center font-semibold"
            />
          </div>
        </div>
      </div>

      {/* Auto Reminder */}
      <div className="bg-white rounded-xl border border-slate-200 p-5">
        <Toggle
          id="ls-auto-send"
          label="Automatically Send Reminder Emails"
          helpText="When enabled, reminder emails will be sent automatically when leads are marked as abandoned. Requires email settings to be configured."
          checked={!!settings.autoSendReminder}
          onChange={(value) => onChange('autoSendReminder', value)}
        />
      </div>
    </div>
  );
}

export default GeneralSettings;