'use client'

import React, { useState } from 'react'
import { Button, useAuth } from '@payloadcms/ui'
import { LogOut, Loader2 } from 'lucide-react'

const LogoutButton: React.FC = () => {
  const { logOut } = useAuth()
  const [isBusy, setIsBusy] = useState(false)

  const handleLogout = async () => {
    if (isBusy) return
    setIsBusy(true)

    try {
      await logOut()
      window.location.assign('/admin')
    } finally {
      setIsBusy(false)
    }
  }

  return (
    <Button
      buttonStyle="secondary"
      className="ml-2 flex items-center justify-center"
      disabled={isBusy}
      size="small"
      onClick={handleLogout}
    >
      {isBusy ? (
        <Loader2 className="h-4 w-4 animate-spin transition-all duration-200" />
      ) : (
        <LogOut className="h-4 w-4 transition-all duration-200" />
      )}
    </Button>
  )
}

export default LogoutButton