import React from "react";
import {Button, Flex, Image, Input, Stack, Text,} from "@chakra-ui/react";

interface loginProps {
    logo: string;
    primaryColor: string;
    onClick: () => void;
    loginTitle: string;
    onForgotPassword: () => void;
}

const Login = ({ loginTitle, logo, primaryColor, onClick, onForgotPassword }: loginProps) => {
    return (
        <Flex
            w="100%"
            h="100vh"
            // pt="120px"
            border="1px solid #DFE0EB"
            justifyContent={"center"}
            alignItems="center"
            bg={primaryColor}
        >
            <Stack
                w="380px"
                h="494px"
                pt="48px"
                px="24px"
                alignItems={"center"}
                borderRadius={"8px"}
                bg="white"
            >
                <Image src={logo} mb="22px" />
                <Text
                    fontFamily="ABC"
                    fontSize="24px"
                    fontStyle="normal"
                    fontWeight="700"
                    lineHeight="31px"
                    letterSpacing="0.30000001192092896px"
                    textAlign="center"
                    color="#051E61"
                    mb="11px"
                >
                    {loginTitle}
                </Text>
                <Text
                    fontFamily="MaisonBook"
                    fontSize="14px"
                    fontStyle="normal"
                    fontWeight="600"
                    lineHeight="20px"
                    color="#9FA2B4"
                    letterSpacing="0.30000001192092896px"
                    textAlign="center"
                >
                    Enter your email and password below
                </Text>
                <Stack pt="15px" spacing="16px" h="215px" w="100%" mb="23px">
                    <Input
                        fontFamily="MaisonBold"
                        fontSize="14px"
                        fontStyle="normal"
                        fontWeight="700"
                        lineHeight="14px"
                        color="black"
                        letterSpacing="0.5px"
                        textAlign="left"
                        placeholder="Email"
                        _placeholder={{ color: "#C1C7D9" }}
                        w="332px"
                        h="48px"
                        borderRadius={"8px"}
                        borderColor={"#DFE0EB"}
                        padding="16px, 148px, 16px, 16px"
                    />
                    <Input
                        fontFamily="MaisonBold"
                        fontSize="14px"
                        fontStyle="normal"
                        type={"password"}
                        fontWeight="700"
                        lineHeight="14px"
                        color="black"
                        letterSpacing="0.5px"
                        textAlign="left"
                        placeholder="Password"
                        _placeholder={{ color: "#C1C7D9" }}
                        w="332px"
                        h="48px"
                        borderRadius={"8px"}
                        borderColor={"#DFE0EB"}
                        padding="16px, 148px, 16px, 16px"
                    />
                    <Button
                        fontFamily="MaisonBold"
                        fontSize="14px"
                        fontStyle="normal"
                        fontWeight="700"
                        lineHeight="14px"
                        color="white"
                        letterSpacing="0.5px"
                        w="332px"
                        h="48px"
                        _hover={{ backgoundColor: { primaryColor }, color: "white" }}
                        borderRadius={"8px"}
                        bg={primaryColor}
                        onClick={onClick}
                    >
                        LOG IN
                    </Button>
                </Stack>

                <Text
                    fontFamily="MaisonBook"
                    fontSize="12px"
                    fontStyle="normal"
                    fontWeight="600"
                    lineHeight="12px"
                    cursor={"pointer"}
                    color="#9FA2B4"
                    letterSpacing="0.10000001192092896px"
                    textAlign="right"
                    onClick={onForgotPassword}
                >
                    Forgot password?
                </Text>
            </Stack>
        </Flex>
    );
};

export default Login;