// @design-system: primitives/LogoutButton
'use client';

/**
 * LogoutButton - posts to /api/auth/logout with the CSRF token,
 * then redirects to /login. Renders as a ghost button with a LogOut icon.
 */

import { useT } from '@/lib/i18n/react';
import { Button } from '@/components/ui/primitives/Button';
import type { VariantProps } from 'class-variance-authority';
import type { buttonVariants } from '@/components/ui/primitives/Button/variants';
import { Icon } from '@/components/ui/icons/Icon';
import { useLogout } from './useLogout';

export interface LogoutButtonProps {
  /** Additional class names */
  className?: string;
  /**
   * Button variant. Use `ghost-inverted` when rendered on a colored/dark
   * background (e.g. the blue DesktopTopBar). Defaults to `ghost-inverted`.
   */
  variant?: VariantProps<typeof buttonVariants>['variant'];
}

export function LogoutButton({ className, variant = 'ghost-inverted' }: LogoutButtonProps) {
  const t = useT('common');
  const { logout, loading } = useLogout();

  return (
    <Button
      variant={variant}
      size="sm"
      onClick={() => void logout()}
      loading={loading}
      iconStart={<Icon name="LogOut" size="sm" />}
      className={className}
    >
      {t('logout')}
    </Button>
  );
}