import { Avatar, Box, HStack, Text, VStack } from "@chakra-ui/react";
import { FaCamera } from "react-icons/fa";
import EditableInput from "../../components/EditableInput";
import MainFrame from "../../components/MainFrame";
import { Field } from "../../components/ui/field";
import Changepassword from "./ChangePassword";

const Profile = () => {
  return (
    <MainFrame >
      <HStack  alignItems={'flex-start'} justifyContent={'center'} pt={0} h={'89vh'} w={'100%'} >

        <VStack   w={'50%'} p={3} rounded={'lg'} mb={3}>

<HStack shadow={'md'} rounded={'lg'} justifyContent={'space-between'} alignItems={'flex-end'}  w={'100%'} px={3}  py={3} >
        <VStack  w={'100%'} alignItems={'flex-start'} gap={0}>
        <Box mb={2} position="relative" width="fit-content"
          cursor="pointer" onClick={() => alert("Avatar clicked!")}>
          <Avatar.Root size={"2xl"} style={{ display: "inline-block", width: "auto" }}>
            <Avatar.Fallback />
            <Avatar.Image src="https://i.pinimg.com/736x/d6/cd/0f/d6cd0ffd4634b0763d3958a7325ce26e.jpg" />
          </Avatar.Root>
          <Box
            position="absolute"
            bottom="-2px"
            left={"39px"}
            p="2px"
          >
            <FaCamera  color="#ccc" size={16} />
          </Box>
        </Box>
        <Text color={"black"} as={'span'} fontSize={'sm'} fontWeight={"bold"}>Ritesh Pandey</Text>
        <Text color="black" as={'span'} fontSize={'xs'}>
          Employee ID: <span>#1245679</span>
        </Text>
        </VStack>

        
        <Changepassword />
        </HStack>

        
        <VStack  w={"100%"} >
        <Field mt={4} label="First Name" fontSize="xs" required>
              <EditableInput defaultValue="Ritesh" placeholder="Enter first name" />
            </Field>

            <Field mt={4} label="Last Name" fontSize="xs" required>
              <EditableInput defaultValue="Pandey" placeholder="Enter last name" />
            </Field>

            <Field mt={4} label="Mobile Number" fontSize="xs" required>
              <EditableInput defaultValue={"98234567892"} placeholder="Mobile Number" type='number' />
            </Field>






        </VStack>
        </VStack>

      </HStack>

    </MainFrame >
  )
}

export default Profile