import React from 'react'
import {
  Button,
  Popover,
  PopoverArrow,
  PopoverBody,
  PopoverCloseButton,
  PopoverContent,
  PopoverHeader,
  PopoverTrigger,
  ButtonProps,
  Link,
} from '@chakra-ui/react'

const DisconnectButton: React.FC<ButtonProps> = (props) => {
  return (
    <Popover>
      <PopoverTrigger>
        <Button variant="ghost" color="gray.500" size="sm" {...props}>
          Desconectarse
        </Button>
      </PopoverTrigger>
      <PopoverContent>
        <PopoverArrow />
        <PopoverCloseButton />
        <PopoverHeader>Confirmación</PopoverHeader>
        <PopoverBody textAlign="center">
          ¿Estás segur@ de que querés desconectarte?
        </PopoverBody>
        <Link
          href="/auth/logout"
          display="block"
          textAlign="center"
          fontWeight="bold"
          color="red.500"
          size="sm"
          py="0.5rem"
          textDecoration="none"
          _hover={{
            backgroundColor: 'red.50',
          }}
        >
          Desconectarse
        </Link>
      </PopoverContent>
    </Popover>
  )
}

export default DisconnectButton
