import { IconButton, IconButtonProps } from "@mui/material";
import { deepmerge } from "@mui/utils";

export function LogoutButton(props: IconButtonProps) {
  return (
    <IconButton
      {...deepmerge(
        {
          sx: {
            height: 36,
            width: 36,
            p: 0,
            borderRadius: "6px",
            backgroundColor: "#F2F3F7",
            color: "#9A9AAF",
            "&:hover": {
              color: "#F2F3F7",
              backgroundColor: "#9A9AAF",
            },
            "&:active": {
              backgroundColor: "#7E2AEA",
              color: "white",
            },
          },
        },
        props,
      )}
    >
      <svg
        width="100%"
        height="100%"
        viewBox="0 0 36 37"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M22.559 22.052v2.95a2 2 0 0 1-2 2h-6.865a2 2 0 0 1-2-2v-12.5a2 2 0 0 1 2-2h6.865a2 2 0 0 1 2 2v2.95M25.067 21.227l1.786-1.763a1 1 0 0 0 0-1.423l-1.786-1.764M26.737 18.752H16.71"
          stroke="currentColor"
          strokeWidth="1.5"
          strokeLinecap="round"
        />
      </svg>
    </IconButton>
  );
}