'use client';

import { useState } from 'react';

export function SignOutButton() {
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState('');
  async function signOut() {
    setBusy(true);
    setError('');
    try {
      const response = await fetch('/api/auth/logout', { method: 'POST' });
      if (!response.ok) throw new Error('Sign out failed. Please retry.');
      window.location.assign('/login');
    } catch {
      setError('Sign out failed. Please retry.');
      setBusy(false);
    }
  }
  return <div><button className="text-button" type="button" disabled={busy} onClick={() => void signOut()}>{busy ? 'Signing out...' : 'Sign out'}</button>{error && <p role="alert">{error}</p>}</div>;
}