/* eslint-disable no-unused-vars */
import { Box, Button, Image, Text, Grid, GridItem } from "@chakra-ui/react";
import { Container } from "@chakra-ui/react";
import {
  List,
  ListItem,
  ListIcon,
  OrderedList,
  UnorderedList,
} from "@chakra-ui/react";
import vector1 from "../../assets/images/vector1.png";

export const Component1 = ({ id, title, content }) => {
  return (
    <>
      <Box display={"flex"} position={"absolute"} top={"-70px"} key={id}>
        <Button
          position={"relative"}
          background={"transparent"}
          width={"165px"}
          height={"57px"}
          borderRadius={"28.5px"}
          color={"#fff"}
          border={"1px solid #A5A5A5"}
          fontSize={"16px"}
          // _after={{
          //   content: "''",
          //   position: "absolute",
          //   backgroundImage: `url(${vector1})`,
          //   backgroundRepeat: "no-repeat",
          //   width: "383px",
          //   height: "100%",
          //   left: "165px",
          //   top: "28px",
          // }}
          sx={{
            "::after": {
              content: "''",
              position: "absolute",
              background: `url(${vector1})`,
              backgroundRepeat: "no-repeat",
              width: "383px",
              height: "100%",
              left: "165px",
              top: "28px",
            },
          }}
          _hover={{
            background: "transparent",
            width: "165px",
            height: "57px",
            borderRadius: "28.5px",
            color: "#fff",
            border: "1px solid #A5A5A5",
          }}
        >
          {title}
        </Button>
      </Box>
      <UnorderedList color={"#E1E1E1"}>
        <ListItem fontSize={"14px"}>{content}</ListItem>
        {/* <ListItem fontSize={"14px"}>
          Mobile nodes with full state data will settle P2P . Consensus provided
          by nearby node validators.
        </ListItem>
        <ListItem fontSize={"14px"}>
          High scalability, Partition tolerance and portability
        </ListItem> */}
      </UnorderedList>
    </>
  );
};