import { Box } from "@mui/material";
import React from "react";
import { useResponsive } from "../theme/useResponsive";

interface DividerProps {
  marginTopDivider?: string | "1vw";
  marginBottomDivider?: string | "1vw";
}

function Divider({ marginTopDivider, marginBottomDivider }: DividerProps) {
  const { isMobile } = useResponsive();
  return (
    <Box sx={{ display: "flex", alignItems: "center", justifyContent: "center", bgcolor: "#fff" }}>
        <Box
        sx={{
            display: "flex",
            alignItems: "center",
            width: "85%",
            height: isMobile ? "0.3vw" : "0.15vw",
            backgroundColor: "rgba(220, 220, 220, 1)",
            borderRadius: "1vw",
            // position: "absolute",
            mt: marginTopDivider,
            mb: marginBottomDivider,
        }}
        ></Box>
    </Box>
  );
};

export default Divider;