import { Avatar, Box, Field, Input, SimpleGrid, Stack, Text } from "@chakra-ui/react";
import { FaCamera } from "react-icons/fa";
import MainFrame from "../../components/MainFrame";
import Changepassword from "./ChangePassword";

const Profile = () => {
  return (
    <MainFrame >
      <Stack p={5}>
        <Box position="relative" width="fit-content"
          display="inline-block"
          cursor="pointer" onClick={() => alert("Avatar clicked!")}>
          <Avatar.Root size={"2xl"} style={{ display: "inline-block", width: "auto" }}>
            <Avatar.Fallback />
            <Avatar.Image src="https://bit.ly/sage-adebayo" />
          </Avatar.Root>
          <Box
            position="absolute"
            bottom="-2px"
            left={"39px"}
            p="2px"
          >
            <FaCamera color="black" size={16} />
          </Box>
        </Box>
        <Text color={"black"} fontWeight={"bold"}>{`Jackson Da`.slice(0, 10) + '...'}</Text>
        <Text color="black" fontSize="12px">
          Employee ID: <span>#1245679</span>
        </Text>
        <Box w={"70%"} mt={5}>
          <SimpleGrid columns={{ base: 1, md: 2 }} columnGap={9} rowGap={4}>
            <Field.Root>
              <Field.Label color="black" pt={1} fontSize="12px">First Name</Field.Label>
              <Input placeholder="Enter the First Name" color="black" border="1px solid grey" pl={1} fontSize="12px" height="30px" />
            </Field.Root>
            <Field.Root>
              <Field.Label color="black" pt={1} fontSize="12px">last Name</Field.Label>
              <Input placeholder="Enter the last Name" color="black" border="1px solid grey" pl={1} fontSize="12px" height="30px" />
            </Field.Root>
            <Field.Root>
              <Field.Label color="black" pt={1} fontSize="12px" >Phone Number</Field.Label>
              <Input placeholder="Enter the Phone Number" color="black" border="1px solid grey" pl={1} fontSize="12px" height="30px" />
            </Field.Root>
          </SimpleGrid>
          <Text color={"black"} fontWeight={"bold"} fontSize={"14px"} mt={5}>Update password</Text>
          {/* <Button bg="#02A0A0" color={"#fff"} p={4} fontSize={"12px"} mt={2}>
            Change Password
          </Button> */}
          <Changepassword />

        </Box>

      </Stack>

    </MainFrame >
  )
}

export default Profile