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

let backicon = 'https://firebasestorage.googleapis.com/v0/b/aime2-322411.appspot.com/o/back_icon.png?alt=media&token=eff1ca79-bc1f-465b-8551-b677a7d909c5'

function CustomVideoPlayer(props: any) {
    const {heading, title, description, url, onReview} = props

    const goBack = () => {
        props.onClose();
    }
    return (
        <Stack
            px={"3"}
            py="5"
            spacing={"6"}
        >
            <Stack onClick={goBack}>
                <Image w={"6px"} h={"12px"} src={backicon}/>
            </Stack>

            <video style={{borderRadius: "16px", maxWidth: "560px"}} controls>
                <source src={url}/>
            </video>
            <Stack
                alignItems={"flex-start"}>
                <Stack
                    pl="8px" textAlign="left"
                    spacing={"4"}>
                    <Stack spacing={"0"}>
                        <Text color={"#929CB5"}>{heading}</Text>
                        <Text
                            fontWeight={"700"}
                            fontSize={"22px"}
                            color={"#FFBD18"}>
                            {title}
                        </Text>
                    </Stack>
                    <Text color={"#5D6780"}>
                        {description}
                    </Text>
                </Stack>
                <br/>
                <Stack>
                    <Button
                        fontSize={"20px"}
                        borderRadius={"12px"}
                        padding={"20px"}
                        // width={"327px"}
                        width={"345px"}
                        height={"56px"}
                        onClick={onReview}

                        fontWeight={"500"}
                        color={"white"}
                        bg={"#43C6A1"}>
                        Review content
                    </Button>
                </Stack>
            </Stack>
        </Stack>

    )

}

export default CustomVideoPlayer;