import { Box, Button, Container, Image } from "@chakra-ui/react";
import React from "react";
import logo from "../assets/logo.png";
import earth from "../assets/earth.png";
import { NavLink } from "react-router-dom";
import { ChevronDownIcon } from "@chakra-ui/icons";

export const nav = [
  {
    title: "Investment",
    path: "/investment",
  },
  {
    title: "How it works",
    path: "/investment",
  },
  {
    title: "FAQ",
    path: "/investment",
  },
  {
    title: "About Us",
    path: "/investment",
  },
];

const Header = () => {
  return (
    <Box position={"fix"} top={0} backgroundColor={"#002F0F"}>
      <Container
        p={4}
        display={"flex"}
        justifyContent={"space-between"}
        maxW="container.xl"
      >
        <Image src={logo} h={8} />
        <Box display={"flex"} gap={6}>
          {nav.map(({ title, path }, index) => (
            <NavLink
              style={{
                textDecoration: "none",
                color: "white",
                display: "flex",
                alignItems: "center",
              }}
              to={path}
            >
              {title}
            </NavLink>
          ))}
        </Box>

        <Box display={"flex"} alignItems={"center"} gap={4}>
          <span className="d-flex align-items-center gap-1 text-white">
            <Image src={earth} h={4} me={1} /> En <ChevronDownIcon />
          </span>
          <Button color={"#002F0F"} ps={6} pe={6} size={"sm"} rounded={"xl"}>
            Contact Us
          </Button>
        </Box>
      </Container>
    </Box>
  );
};

export default Header;