import { useTranslation } from 'react-i18next';
import { useQrState, useQrDispatch } from '../store/qrContext';
import { MODES } from '../types';

const MODE_LABELS: Record<string, string> = {
  text: 'mode.text',
  url: 'mode.url',
  wifi: 'mode.wifi',
  vcard: 'mode.vcard',
  email: 'mode.email',
  phone: 'mode.phone',
  sms: 'mode.sms',
};

export default function ModePanel() {
  const { t } = useTranslation();
  const state = useQrState();
  const dispatch = useQrDispatch();

  return (
    <div className="w-48 border-r border-gray-200 dark:border-gray-800 p-3 flex flex-col gap-1 bg-white/60 dark:bg-gray-900/60 backdrop-blur-sm">
      <div className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2 px-2">
        {t('app.encodingModes')}
      </div>
      {MODES.map((mode) => (
        <button
          key={mode}
          onClick={() => dispatch({ type: 'SET_MODE', payload: mode })}
          className={`px-3 py-2 rounded-lg text-left text-sm transition-all ${
            state.mode === mode
              ? 'bg-gradient-to-r from-blue-500 to-cyan-500 text-white shadow-md shadow-blue-500/20'
              : 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800'
          }`}
        >
          {t(MODE_LABELS[mode])}
        </button>
      ))}
    </div>
  );
}