Function AdvancedSettings

components/settings/AdvancedSettings.tsx:31–183

({
  settings,
  onUpdate,
}: AdvancedSettingsProps)

}

export const AdvancedSettings = ({
  settings,
  onUpdate,
}: AdvancedSettingsProps) => {
  const updateRenaming = useCallback(
    (pattern: string, startSequence: number) => {
      onUpdate('renaming', {pattern, startSequence});
    },
    [onUpdate],
  );

  return (
    <div className="animate-in fade-in slide-in-from-bottom-4 duration-500 space-y-10">
      {/* 1. Theme Selector */}
      <div>
        <SectionHeader
          icon={Monitor}
          title="Appearance"
          description="Choose how Blair looks on your device."
        />
        <div className="grid grid-cols-3 gap-4 bg-white/50 dark:bg-slate-800 p-2 rounded-3xl border border-white/60 dark:border-white/5 mb-6">
          {[
            {id: 'light', icon: Sun, label: 'Light'},
            {id: 'dark', icon: Moon, label: 'Dark'},
            {id: 'system', icon: Monitor, label: 'System'},
          ].map(option => (
            <button
              key={option.id}
              onClick={() => onUpdate('theme', option.id as ThemeOption)}
              className={clsx(
                'flex flex-col items-center gap-2 p-4 rounded-2xl transition-all border-2',
                settings.theme === option.id
                  ? 'bg-white dark:bg-slate-700 border-indigo-500 text-indigo-600 dark:border-sky-500 dark:text-sky-400 shadow-md'
                  : 'border-transparent hover:bg-white/50 dark:hover:bg-slate-700/50 text-slate-500 dark:text-slate-400',
              )}
            >
              <option.icon className="w-6 h-6" />
              <span className="font-bold">{option.label}</span>
            </button>
          ))}
        </div>
      </div>

      {/* 2. Automation */}
      <div>
        <SectionHeader
          icon={Workflow}
          title="Automation"
          description="Settings for automatic saving."
        />
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <ToggleCard
            title="Auto Download"
            description="Automatically save files to your computer immediately after they finish processing."
            active={settings.autoDownload}
            onClick={() => onUpdate('autoDownload', !settings.autoDownload)}
            icon={ArrowDownToLine}
          />