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

const personalInfo = [
  {
    title: "Full Name :",
    text: "Andrew Burns",
  },
  {
    title: "Mobile :",
    text: "(123) 123 1234",
  },
  {
    title: "Email :",
    text: "andrewburns@gmail.com",
  },
  {
    title: "Location : ",
    text: "USA",
  },
  {
    title: "Experience : ",
    text: "Back end Developer",
  },
];

const PersonalInformation = () => {
  return (
    <>
      <Card
        sx={{
          boxShadow: "none",
          borderRadius: "10px",
          p: "25px",
          mb: "15px",
        }}
      >
        <Box
          sx={{
            borderBottom: "1px solid #EEF0F7",
            paddingBottom: "10px",
            mb: "20px",
          }}
          className="for-dark-bottom-border"
        >
          <Typography
            as="h3"
            sx={{
              fontSize: 18,
              fontWeight: 500,
            }}
          >
            Personal Information
          </Typography>
        </Box>

        <Box>
          <Typography as="h4" fontWeight="500" fontSize="15px" mb={1}>
            About Me:
          </Typography>

          <Typography mb={1}>
            Hi I'm Andrew Burns,has been the industry's standard dummy text ever
            since the 1500s, when an unknown printer took a galley of type.
          </Typography>

          {personalInfo.map((info) => (
            <Box
              sx={{
                display: "flex",
                borderBottom: "1px solid #F7FAFF",
                p: "10px 0",
              }}
              className="for-dark-bottom-border"
              key={info.title}
            >
              <Typography
                as="h4"
                fontWeight="500"
                fontSize="14px"
                width="100px"
              >
                {info.title}
              </Typography>

              <Typography>{info.text}</Typography>
            </Box>
          ))}
        </Box>
      </Card>
    </>
  );
};

export default PersonalInformation;