// views/MainView.jsx
import React from "react";
import { Typography, Button, Flex, Space } from "antd";
import { ReactComponent as LogoHorizontal } from "./logo-horizontal.svg";
import { ReactComponent as LogoVertical } from "./logo-vertical.svg";
import { useMediaQuery } from "react-responsive";

const { Paragraph } = Typography;

const MainView = ({ setCurrentView }) => {
  const isMobile = useMediaQuery({ maxWidth: 600 });
  return (
    <Flex
      justify="center"
      align={isMobile ? "flex-start" : "center"}
      vertical
      style={{ height: "100%", padding: "24px 50px" }}
    >
      <div style={{ textAlign: "center", maxWidth: "800px", margin: "0 0" }}>
        <div className={"tblogo"}>
          {isMobile ? (
            <LogoVertical height={180} />
          ) : (
            <LogoHorizontal height={60} />
          )}
        </div>
        {isMobile ? (
          <Flex
            justify="left"
            align="left"
            vertical
            style={{ marginTop: "12.5px" }}
          >
            <Button
              className="tbmobilenav"
              style={{ textAlign: "left" }}
              onClick={() => setCurrentView("experience")}
            >
              Experience
            </Button>
            <Button
              className="tbmobilenav"
              style={{ textAlign: "left" }}
              onClick={() => setCurrentView("blogs")}
            >
              Blog
            </Button>
            <Button
              className="tbmobilenav"
              style={{ textAlign: "left" }}
              onClick={() => setCurrentView("cv")}
            >
              CV
            </Button>
            <Button
              className="tbmobilenav"
              style={{ textAlign: "left" }}
              onClick={() => setCurrentView("contact")}
            >
              Contact
            </Button>
          </Flex>
        ) : (
          <Flex justify="center" align="center">
            <Button
              className={"tbnav"}
              onClick={() => setCurrentView("experience")}
            >
              Experience
            </Button>
            <Button className={"tbnav"} onClick={() => setCurrentView("blogs")}>
              Blog
            </Button>
            <Button className={"tbnav"} onClick={() => setCurrentView("cv")}>
              CV
            </Button>
            <Button
              className={"tbnav"}
              onClick={() => setCurrentView("contact")}
            >
              Contact
            </Button>
          </Flex>
        )}
      </div>
    </Flex>
  );
};

export default MainView;