import Link from "next/link"
import Box from "@mui/material/Box"
import Toolbar from "@mui/material/Toolbar"
import { styled } from "@mui/material/styles"
import MuiAppBar, { AppBarProps as MuiAppBarProps } from "@mui/material/AppBar"
import Tabs from "@mui/material/Tabs"
import Tab, { type TabProps } from "@mui/material/Tab"

interface AppBarProps extends MuiAppBarProps {
  open?: boolean
}

export const AppBarHeight = 64

export const AppBar = styled(MuiAppBar, {
  shouldForwardProp: (prop) => prop !== "open",
})<AppBarProps>`
  position: relative;
  height: ${AppBarHeight}px;
`

export const AppToolbar = styled(Toolbar)`
  padding-right: ${({ theme }) => theme.spacing(2)};
  background-color: ${({ theme }) => theme.palette.background.default};
`

export const ActionContentContainer = styled(Box)`
  height: 100%;
  display: flex;
  flex: 1;
  align-items: flex-end;
`

export const MenuTabs = styled(Tabs)`
  margin-left: ${({ theme }) => theme.spacing(2)};
`

export const MenuTab = styled(Tab)<TabProps<"a">>`
  font-weight: bold;
  height: ${AppBarHeight}px;
`

export const AbsoluteLink = styled(Link)`
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-decoration: none;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
`