"use client";
import Grid from "@mui/material/Grid";
import Paper from "@mui/material/Paper";
import { TFunction } from "i18next";
import { useTranslation } from "react-i18next";

type PageTitleProps = {
  BigTitle: string;
  SecondTitle?: string;
  ThirdTitle?: string;
  FourthTitle?: string;
};

const PageTitle: React.FC<PageTitleProps> = ({
  BigTitle,
  SecondTitle = "",
  ThirdTitle = "",
  FourthTitle = "",
}) => {
  const { t } = useTranslation("dashboard");
  return (
    <Grid item sm>
      <div style={{ marginTop: 20, marginLeft: 20 }}>
        <h1
          style={{
            display: "inline-block",
            color: "#636363",
            verticalAlign: "top",
          }}
        >
          {BigTitle}
        </h1>
        &nbsp;&nbsp;
        <hr
          color="#D6DCE1"
          style={{
            display: "inline-block",
            width: 1,
            height: 35,
            marginTop: 25,
          }}
        />
        &nbsp;&nbsp;
        <h3
          style={{
            display: "inline-block",
            color: "#6BAFD8",
            verticalAlign: "top",
            marginTop: 32,
          }}
        >
          Overview
        </h3>
        &nbsp;
        <h3
          style={{
            display: "inline-block",
            color: "#6E6B7B",
            verticalAlign: "top",
            marginTop: 32,
          }}
        >
          {">"}
        </h3>
        &nbsp;
        <h3
          style={{
            display: "inline-block",
            color: "#6E6B7B",
            verticalAlign: "top",
            marginTop: 32,
          }}
        >
          {BigTitle}
        </h3>
        &nbsp;
        {SecondTitle !== "" ? (
          <h3
            style={{
              display: "inline-block",
              color: "#6E6B7B",
              verticalAlign: "top",
              marginTop: 32,
            }}
          >
            {">"}&nbsp;
          </h3>
        ) : (
          ""
        )}
        {SecondTitle !== "" ? (
          <h3
            style={{
              display: "inline-block",
              color: "#6E6B7B",
              verticalAlign: "top",
              marginTop: 32,
            }}
          >
            {SecondTitle}&nbsp;
          </h3>
        ) : (
          ""
        )}
        {ThirdTitle !== "" ? (
          <h3
            style={{
              display: "inline-block",
              color: "#6E6B7B",
              verticalAlign: "top",
              marginTop: 32,
            }}
          >
            {">"}&nbsp;
          </h3>
        ) : (
          ""
        )}
        {ThirdTitle !== "" ? (
          <h3
            style={{
              display: "inline-block",
              color: "#6E6B7B",
              verticalAlign: "top",
              marginTop: 32,
            }}
          >
            {ThirdTitle}&nbsp;
          </h3>
        ) : (
          ""
        )}
        {FourthTitle !== "" ? (
          <h3
            style={{
              display: "inline-block",
              color: "#6E6B7B",
              verticalAlign: "top",
              marginTop: 32,
            }}
          >
            {">"}&nbsp;
          </h3>
        ) : (
          ""
        )}
        {FourthTitle !== "" ? (
          <h3
            style={{
              display: "inline-block",
              color: "#6E6B7B",
              verticalAlign: "top",
              marginTop: 32,
            }}
          >
            {FourthTitle}&nbsp;
          </h3>
        ) : (
          ""
        )}
      </div>
    </Grid>
  );
};

export default PageTitle;
