'use client'
import { Box, Button, Image, PasswordInput, Stack, Text } from "@mantine/core";
import { useViewportSize } from "@mantine/hooks";
import { useState } from "react";


export default function LoginPageDashboard({ onSubmit }: { onSubmit: (val: string) => void }) {
   const { height, width } = useViewportSize();
   const [password, setPassword] = useState("")

   return (
      <>
         <Stack
            h={height}
            bg="#c1a0fd"
            align="stretch"
            justify="space-between"
            gap="xl"
         >
            <Image
               w="auto"
               src="/assets/img/bg-login3.jpg"
               alt="background login"
            />
            <Text ta={'center'} fw={'bold'} fz={45} color="white" ff={'Arial'}
               style={{
                  textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
                  lineHeight: '10px'
               }}>
               WELCOME!
            </Text>
            <Box h="35%" bg="white" style={{ borderTopLeftRadius: 50, borderTopRightRadius: 50, boxShadow: '0px 0px 15px rgba(0, 0, 0, 0.25)', paddingLeft: 50, paddingRight: 50, justifyContent: 'center', alignItems: 'center' }}>
               <Stack justify="center" h={"100%"}>
                  <Box mb={20}>
                     <Text ta={'center'} ff={'Arial'} fz={20}>Sign in</Text>
                     <Text c={'#7e7e7e'} ff={'Arial'} fz={13}>If you do not know the password, kindly contact the developer for assistance.</Text>
                  </Box>
                  <PasswordInput
                     variant="filled"
                     size="md"
                     radius="xl"
                     placeholder="Password"
                     ff={'Arial'}
                     withAsterisk
                     onChange={(e) => setPassword(e.target.value)}
                  />
                  <Button ff={'Arial'} variant="filled" radius="xl" size="md" bg={'#ad73f1'} onClick={() => onSubmit(password)}>Submit</Button>
               </Stack>
            </Box>
         </Stack>
      </>
   )
}