"use client"

import type { ILogoutButtonProps } from "./LogoutButton.d"
import type { JSX } from "react"

import Cookies from "js-cookie"
import { FunctionComponent } from "react"

import { useRouter } from "next/navigation"

import { useAppDispatch } from "@shared/hooks/useAppDispatch"
import {
	ACCESS_TOKEN_COOKIE,
	REFRESH_TOKEN_COOKIE,
} from "@shared/lib/constants"
import { resetUser } from "@shared/store/user"
import { Button } from "@shared/ui"

export const LogoutButton: FunctionComponent<
	ILogoutButtonProps
> = ({ className }): JSX.Element => {
	const router = useRouter()
	const dispatch = useAppDispatch()

	const handleLogout = () => {
		Cookies.remove(ACCESS_TOKEN_COOKIE)
		Cookies.remove(REFRESH_TOKEN_COOKIE)
		dispatch(resetUser())
		router.push("/login")
	}

	return (
		<Button
			variant="danger"
			size="lg"
			className={className}
			onClick={handleLogout}
			data-testid="LogoutButton"
		>
			Выйти из аккаунта
		</Button>
	)
}
