interface Props {
  mode: 'autocomplete' | 'clipboard';
  onChange: (mode: 'autocomplete' | 'clipboard') => void;
}

export function OperatingMode({ mode, onChange }: Props) {
  return (
    <>
      <div class="flex items-center gap-2 text-sm font-semibold text-text-primary my-2">
        <i class="fa-solid fa-bolt text-primary"></i>
        <span>Operating Mode</span>
      </div>
      <ul
        id="mode"
        class="list-none p-0 m-0 flex bg-input-bg rounded-xl border border-input-border overflow-hidden"
      >
        <li class="flex-1">
          <button
            value="autocomplete"
            class={`w-full p-2.5 border-none font-sans text-sm font-semibold cursor-pointer transition-colors duration-300 ${
              mode === 'autocomplete'
                ? 'bg-primary text-text-primary shadow-[0_2px_8px_rgba(99,102,241,0.4)]'
                : 'bg-transparent text-text-secondary hover:bg-white/5 hover:text-text-primary'
            }`}
            onClick={() => onChange('autocomplete')}
          >
            autocomplete
          </button>
        </li>
        <li class="flex-1">
          <button
            value="clipboard"
            class={`w-full p-2.5 border-none font-sans text-sm font-semibold cursor-pointer transition-colors duration-300 ${
              mode === 'clipboard'
                ? 'bg-primary text-text-primary shadow-[0_2px_8px_rgba(99,102,241,0.4)]'
                : 'bg-transparent text-text-secondary hover:bg-white/5 hover:text-text-primary'
            }`}
            onClick={() => onChange('clipboard')}
          >
            clipboard
          </button>
        </li>
      </ul>
    </>
  );
}
