'use client';

import { useState } from 'react';
import { useI18n } from '@/lib/i18n/context';

type Props = {
  className?: string;
};

export default function LanguageToggle({ className = '' }: Props) {
  const { t, locale, setLocale } = useI18n();
  const [langBusy, setLangBusy] = useState(false);

  return (
    <div
      className={`flex items-center rounded-lg border border-gray-200 overflow-hidden text-xs sm:text-sm font-semibold shadow-sm ${className}`}
      title={t('settings.changeLanguage')}
    >
      <button
        type="button"
        disabled={langBusy || locale === 'ar'}
        onClick={() => {
          setLangBusy(true);
          void setLocale('ar').finally(() => setLangBusy(false));
        }}
        className={`px-2.5 sm:px-3 py-1.5 transition-colors cursor-pointer disabled:cursor-default ${
          locale === 'ar' ? 'bg-blue-600 text-white' : 'bg-white text-gray-600 hover:bg-gray-50'
        }`}
      >
        {t('nav.langAr')}
      </button>
      <button
        type="button"
        disabled={langBusy || locale === 'en'}
        onClick={() => {
          setLangBusy(true);
          void setLocale('en').finally(() => setLangBusy(false));
        }}
        className={`px-2.5 sm:px-3 py-1.5 transition-colors cursor-pointer disabled:cursor-default border-s border-gray-200 ${
          locale === 'en' ? 'bg-blue-600 text-white' : 'bg-white text-gray-600 hover:bg-gray-50'
        }`}
      >
        {t('nav.langEn')}
      </button>
    </div>
  );
}