import * as React from "react";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import NextLink from "next/link";

import TextSnippetIcon from "@mui/icons-material/TextSnippet";

import { FEEDBACK_URL } from "@/constants/url";

export default function FeedbackFAB() {
  return (
    <NextLink href={FEEDBACK_URL} target="_blank">
      <Box
        sx={{
          position: "fixed",
          right: 0,
          top: "calc(64px + 3rem)",
          writingMode: "vertical-rl",
          transform: "rotate(180deg)",
          backgroundColor: "#787DFF",
          color: (theme) => theme.palette.primary.contrastText,
          px: (theme) => theme.spacing(0.5),
          py: (theme) => theme.spacing(1.5),
          borderRadius: "0 6px 6px 0",
          zIndex: 1000,
        }}
      >
        <Typography
          variant="h6"
          component="div"
          fontSize="16px"
          display="inline-flex"
          gap={1}
          alignItems="center"
        >
          <TextSnippetIcon
            fontSize="inherit"
            sx={{
              transform: "rotate(90deg)",
            }}
          />
          Feedback
        </Typography>
      </Box>
    </NextLink>
  );
}