import FullCalendar from "@fullcalendar/react";
import { Box, useTheme } from "@mui/material";
import React from "react";

type Props = React.ComponentProps<typeof FullCalendar>;

const StyledFullCalendar: React.FC<Props> = (props) => {
  const theme = useTheme();

  return (
    <Box
      sx={{
        ".fc": {
          fontFamily: theme.typography.fontFamily,
          ".fc-toolbar-title": theme.typography.h6,
          ".fc-button": {
            borderRadius: "12px",
            border: "none",
            fontWeight: theme.typography.button.fontWeight,
            fontSize: theme.typography.button.fontSize,
          },
          ".fc-button-primary": {
            backgroundColor: "primary.main",
            "&:disabled": {
              backgroundColor: "action.disabledBackground",
              color: "action.disabled",
              opacity: 1,
            },
            "&:active:not(:disabled)": {
              backgroundColor: "primary.dark",
            },
          },
          ".fc-prev-button": { marginInlineEnd: 1 },
          ".fc-prev-button, .fc-next-button": {
            background: "transparent",
            border: "none",
            color: "neutral.700",
            padding: 0,
            borderRadius: "50% !important",
            display: "inline-flex",
            alignItems: "center",
            justifyContent: "center",
            width: 40,
            height: 40,
            "&.fc-button:active": {
              color: "neutral.800",
              backgroundColor: "action.hover",
            },
            "&:focus": {
              boxShadow: "none !important",
            },
          },
        },
      }}
    >
      <FullCalendar {...props} />
    </Box>
  );
};

export default StyledFullCalendar;
