import {Box, Flex, Button, HStack, Wrap, Link, Text, Heading} from "@chakra-ui/react";
import NextLink from "next/link";
import Image from 'next/image'
import {RiArrowRightLine, RiMailLine} from "react-icons/ri"
import {MENU_ITEMS} from "../lib/constants";

export default function Banner() {
    return (
        <Box position="relative" width="100%" height="400px" overflow="hidden">
            {/* Background Video */}
            <Box
                as="video"
                autoPlay
                muted
                loop
                playsInline
                objectFit="cover"
                width="100%"
                height="100%"
                position="absolute"
                top={0}
                left={0}
                zIndex={0}
            >
                <source src="/hero-video.mp4" type="video/mp4"/>
            </Box>

            {/* Overlay */}
            <Flex
                direction="column"
                justify="center"
                align="center"
                position="relative"
                zIndex={1}
                bg="rgba(0, 0, 0, 0.4)"
                color="white"
                height="100%"
                textAlign="center"
                px={4}
            >
                {/* Navigation menu on top of banner */}
                <Heading as="h1">Vse za vase male in malo vecje zivali</Heading>
                <Wrap gap={10} justify="center">
                    {MENU_ITEMS.map((item) => (
                        <Button
                            key={item.href}
                            colorPalette="white"
                            variant="solid"
                            asChild
                        >
                            <a href={item.href}>
                                <Image
                                src={item.icon}
                                alt={item.label}
                                width={100}
                                height={100}
                            /><RiMailLine/> {item.label}</a>
                        </Button>
                    ))}
                </Wrap>

                {/* Example headline in the center */}
                {/*<Text fontSize="3xl" fontWeight="bold">
                    Welcome to Our Website
                </Text>*/}
            </Flex>
        </Box>
    );
}