import { Circle, HStack, Image, Input, Text, VStack } from "@chakra-ui/react";
import MainFrame from "../../components/MainFrame";
import mypfp from "../../assets/profile-Avtars/mypfp.png";
import { FaCamera } from "react-icons/fa";
import { Field } from "../../components/ui/field";
import { Button } from "../../components/ui/button";
import { Editable } from "@chakra-ui/react";
const Profile = () => {
  return (
    <MainFrame>
      <VStack gap={4} p={4} alignItems="flex-start">
        <Circle height="113px" width="113px" position="relative">
          <Image src={mypfp} height="100%" />
          <span style={{ position: "absolute", right: "25px", bottom: "0" }}>
            <FaCamera color="black" />
          </span>
        </Circle>

        <VStack alignItems="flex-start">
          <Text fontSize="sm" color="#1C1C1C" fontWeight={700}>
            Jackson David
          </Text>
          <Text color="#090909" fontWeight={400} fontSize={"sm"}>
            <span style={{ fontWeight: "600" }}>Employee ID:</span> #1245679
          </Text>
        </VStack>

        <VStack alignItems="flex-start">
          <HStack>
            <VStack alignItems="flex-start">
              <Text fontSize="sm" color="black">
                First Name
              </Text>
              <Editable.Root
                border="0.5px solid #969696"
                borderRadius="4px"
                w="30vw"
                textAlign="start"
                color="black"
                bg="transparent" 
                defaultValue="Jackson"
              >
                <Editable.Preview />
                <Editable.Input />
              </Editable.Root>
            </VStack>
            <VStack alignItems="flex-start">
              <Text fontSize="sm" color="black">
                Last Name
              </Text>
              <Editable.Root
                border="0.5px solid #969696"
                borderRadius="4px"
                w="30vw"
                textAlign="start"
                color="black"
                defaultValue="David"
              >
                <Editable.Preview />
                <Editable.Input />
              </Editable.Root>
            </VStack>
            {/* <Field color="black" w="30vw" label="First Name">
              <Input color="teal" _placeholder={{ color: "inherit" }} />
            </Field>
            <Field color="black" w="30vw" label="Last Name">
              <Input color="teal" _placeholder={{ color: "inherit" }} />
            </Field> */}
          </HStack>
          {/* <Field color="black" w="30vw" label="Phone Number">
            <Input color="teal" _placeholder={{ color: "inherit" }} />
          </Field> */}
          <VStack alignItems="flex-start">
            <Text fontSize="sm" color="black">
              Phone Number
            </Text>
            <Editable.Root
              _hover={{ bgColor: "white", color: "black" }}
              border="0.5px solid #969696"
              borderRadius="4px"
              w="30vw"
              textAlign="start"
              color="black"
              defaultValue="23435465543"
            >
              <Editable.Preview />
              <Editable.Input />
            </Editable.Root>
          </VStack>
        </VStack>
        <VStack alignItems="flex-start">
          <Text color="#1C1C1C" fontSize="sm" fontWeight={700}>
            Update Password
          </Text>
          <Button
            color="white"
            borderRadius="94px"
            bgColor="#02A0A0"
            w="227px"
            p={2}
          >
            Change Password
          </Button>
        </VStack>
      </VStack>
    </MainFrame>
  );
};

export default Profile;
