'use client';
import { FunctionComponent } from 'react';
import { useTranslations } from 'next-intl';
import { AppButton } from '@/components/common';
import { useLogout } from '@/services/auth';

/**
 * The sign-out action for a settings hub. Always goes through `useLogout()` — the one place that
 * revokes the session server-side and clears the token cookies — never a hand-rolled cookie wipe.
 * @component SignOutRow
 */
const SignOutRow: FunctionComponent = () => {
  const t = useTranslations('nav');
  const { mutate: logout, isPending } = useLogout();

  return (
    <AppButton variant="outlined" color="error" startIcon="logout" fullWidth disabled={isPending} onClick={() => logout()}>
      {t('logout')}
    </AppButton>
  );
};

export default SignOutRow;
