import { useState } from 'react';
import { localizedPath } from '../../i18n/utils';

type Props = {
  locale: 'ar' | 'en';
};

export default function SignOutButton({ locale }: Props) {
  const [loading, setLoading] = useState(false);
  const label = locale === 'ar' ? 'تسجيل الخروج' : 'Sign out';

  async function handleSignOut() {
    setLoading(true);
    try {
      await fetch('/api/auth/logout', { method: 'POST' });
    } finally {
      window.location.href = localizedPath(locale, 'login');
    }
  }

  return (
    <button
      type="button"
      className="btn btn-sm btn-outline"
      onClick={handleSignOut}
      disabled={loading}
    >
      {loading ? '…' : label}
    </button>
  );
}