import { Box, Typography } from "@mui/material"
import React from "react"

const TerminalDiamond = ({ right }) => (
  <Box position="relative">
    <Box
      sx={{
        width: 5,
        height: 5,
        bgcolor: "primary.main",
        transform: "rotate(45deg)",
        position: "absolute",
        top: -3,
        left: right ? "inherit" : -3,
        right: right ? -3 : "inherit",
      }}
    />
  </Box>
)

export const H1Separator = ({ title, component }) => {

  return (
    <Box display="flex">
      <Box width={80} borderTop={1}>
        <TerminalDiamond />
      </Box>
      <Box py={1.5} px={1} border={1} borderTop={0}>
        <Typography
          variant="h1"
          component={component}
          sx={{ textTransform: "uppercase" }}
        >
          {title}
        </Typography>
      </Box>
      <Box flexGrow={1} borderTop={1}>
        <TerminalDiamond right />
      </Box>
    </Box>
  )
}

export const H2Separator = ({ title1, title2, component }) => (
  <Box display="flex" py={1}>
    <Typography
      variant="h2"
      component={component}
      sx={{ textTransform: "uppercase", pr: 2.5 }}
    >
      {title1}{" "}
      <Box component="span" fontWeight={700}>
        {title2}
      </Box>
    </Typography>
    <Box flexGrow={1} display="flex" alignItems="center">
      <Box borderTop={1} width="100%" height="1px">
        <TerminalDiamond />
        <TerminalDiamond right />
      </Box>
    </Box>
  </Box>
)