import React from "react";
import {Button, HStack, Image, Stack,} from "@chakra-ui/react";
import {CustomInput} from "./CustomComponents";

let slideImage = "https://firebasestorage.googleapis.com/v0/b/imagestorage-7b2d2.appspot.com/o/slide.svg?alt=media&token=fd84aba4-e968-4d49-86fa-41c0e6b387b1"
let prevIcon = "https://firebasestorage.googleapis.com/v0/b/imagestorage-7b2d2.appspot.com/o/prev.svg?alt=media&token=75f3854a-3222-42ce-8313-80b12d4e527f"
let playIcon = "https://firebasestorage.googleapis.com/v0/b/imagestorage-7b2d2.appspot.com/o/play.svg?alt=media&token=cfcd4579-bb0c-4fde-890b-1b67944056cc"
let nextIcon = "https://firebasestorage.googleapis.com/v0/b/imagestorage-7b2d2.appspot.com/o/next.svg?alt=media&token=cb317a2a-18f6-45c9-96b8-8af69504821a"

const PreviewTab = () => {
    return (
        <>
            <Stack alignItems={"center"} spacing={"32px"} minWidth={"545px"}>
                <Image w="185.5px" src={slideImage}/>
                <HStack
                    px="2px"
                    w="185.5px"
                    alignItems={"center"}
                    justifyContent={"space-between"}
                >
                    <Image src={prevIcon}/>
                    <Image src={playIcon}/>
                    <Image src={nextIcon}/>
                </HStack>

                <CustomInput
                    title="Publish Date"
                    OnChange={(e: any) => {
                        console.log(e.target.value);
                    }}
                />
            </Stack>
            <HStack py="32px" justifyContent="right" w="545px">
                <Button
                    w="134px"
                    h="46px"
                    color="white"
                    bg="#051E61"
                    fontFamily="MaisonBold"
                    fontSize="14px"
                    fontStyle="normal"
                    fontWeight="700"
                    lineHeight="14px"
                    letterSpacing="0.20000001192092896px"
                >
                    Post Activity
                </Button>
            </HStack>
        </>
    );
};
export default PreviewTab;