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

export const LineWithText = ({ text }) => {
  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        marginBottom: "15px",
        marginTop: "15px",
      }}
    >
      <Divider
        sx={{
          flex: 1,
          height: "2px",
          background:
            "linear-gradient(90deg, rgba(255,0,150,0.5), rgba(0,204,255,0.5))",
          borderRadius: 3,
          opacity: 0.7,
        }}
      />
      <Typography
        variant="body1"
        sx={{
          fontWeight: 500,
          color: "text.primary",
          padding: "0 15px",
          fontSize: "14px",
        }}
      >
        {text}
      </Typography>
      <Divider
        sx={{
          flex: 1,
          height: "2px",
          background:
            "linear-gradient(90deg, rgba(0,204,255,0.5), rgba(255,0,150,0.5))",
          borderRadius: 3,
          opacity: 0.7,
        }}
      />
    </div>
  );
};
