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

let backicon = 'https://firebasestorage.googleapis.com/v0/b/aime2-322411.appspot.com/o/podcast_back_icon.png?alt=media&token=de144aae-c874-4daf-b9d7-fa7cc14934d2'

function CustomPodcast(props: any) {
    const {heading, title, description, url, posterImage, onReview} = props
    const goBack = () => {
        props.onClose();
    }


    return (
        <Flex justify="center" align="center" px="3" py="5">

            <Stack

                backgroundImage={`url(${posterImage})`}
                backgroundSize="cover"
                backgroundPosition="center"
                backgroundRepeat="no-repeat"
                mx={"2"}
                borderRadius={"24px"}
                w={"343px"}
                h={"90vh"}>
                <Stack
                    h="100%" px="25px" justify={"space-between"}>
                    <Stack
                        px={"4px"}
                        mt={"30px"}
                        isInline justify={"space-between"}>
                        <Image
                            onClick={goBack}
                            // w={"6px"} h={"12px"}
                            w={"7px"} h={"14px"}
                            src={backicon}/>
                        <Text
                            // fontSize={"16px"}
                            color={"#FFFFFF"}
                            // fontWeight={"600"}
                            // fontFamily="ABC Ginto Normal Trial"
                            fontSize="16px"
                            fontStyle="normal"
                            fontWeight="800"
                            lineHeight="21px"
                            letterSpacing="0.029999999329447746px"
                            textAlign="right"

                        >{heading}</Text>
                    </Stack>
                    <Stack
                        alignItems={"flex-start"}>
                        <Stack
                            mb={"20px"}
                            pl="8px" textAlign="left"
                        >
                            <Stack spacing={"0"}>
                                <Text
                                    lineHeight={"0.9"}
                                    color={"#FFFFFF"}
                                    fontWeight={"600"}
                                    fontSize={"16px"}>
                                    {title}
                                </Text>
                            </Stack>
                            <Text
                                lineHeight={"1.45"}
                                fontSize={"22px"}
                                fontWeight={"700"}
                                color={"#FFBD18"}
                            >
                                {description}
                            </Text>
                            <audio
                                style={{
                                    maxWidth: "100%",
                                }}
                                controls>
                                <source src={url}/>
                            </audio>
                        </Stack>
                    </Stack>
                </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>

        </Flex>
    )
}

export default CustomPodcast