() => {
  const options = ["apple", "appoint", "zap", "cap", "japan"];
  return (
    <Flex
      boxSize="full"
      h="100vh"
      pos="absolute"
      bg={"gray.400"}
      _dark={{
        bg: "gray.600",
      }}
      p={30}
      justifyContent="center"
    >
      <AutoComplete rollNavigation>
        <AutoCompleteInput variant="filled" placeholder="Search..." autoFocus />
        <AutoCompleteList>
          {options.map((option, oid) => (
            <AutoCompleteItem
              key={`option-${oid}`}
              value={option}
              textTransform="capitalize"
            >
              {option}
            </AutoCompleteItem>
          ))}
        </AutoCompleteList>
      </AutoComplete>
    </Flex>
  );
};

() => {
  const fruits = ["Apple", "Grape", "Pawpaw"];
  const countries = ["Korea", "Nigeria", "India"];
  return (
    <Flex
      boxSize="full"
      h="100vh"
      pos="absolute"
      bg={"gray.400"}
      _dark={{
        bg: "gray.600",
      }}
      p={30}
      justifyContent="center"
    >
      <AutoComplete rollNavigation>
        <AutoCompleteInput variant="filled" placeholder="Search..." autoFocus />
        <AutoCompleteList>
          <AutoCompleteGroup title="Fruits" showDivider>
            {fruits.map((option, oid) => (
              <AutoCompleteItem
                key={`fruits-${oid}`}
                value={option}
                textTransform="capitalize"
              >
                {option}
              </AutoCompleteItem>
            ))}
          </AutoCompleteGroup>
          <AutoCompleteGroup title="countries" showDivider>
            {countries.map((option, oid) => (
              <AutoCompleteItem
                key={`countries-${oid}`}
                value={option}
                textTransform="capitalize"
              >
                {option}
              </AutoCompleteItem>
            ))}
          </AutoCompleteGroup>
        </AutoCompleteList>
      </AutoComplete>
    </Flex>
  );
};

() => {
  const options = ["apple", "appoint", "zap", "cap", "japan"];
  return (
    <Flex
      boxSize="full"
      h="100vh"
      pos="absolute"
      bg={"gray.400"}
      _dark={{
        bg: "gray.600",
      }}
      p={30}
      justifyContent="center"
    >
      <AutoComplete rollNavigation>
        {({ isOpen }) => (
          <>
            <InputGroup>
              <AutoCompleteInput variant="filled" placeholder="Search..." />
              <InputRightElement>
                <Icon as={isOpen ? ChevronRightIcon : ChevronDownIcon} />
              </InputRightElement>
            </InputGroup>
            <AutoCompleteList>
              {options.map((option, oid) => (
                <AutoCompleteItem
                  key={`optio-${oid}`}
                  value={option}
                  textTransform="capitalize"
                  align="center"
                >
                  {option}
                </AutoCompleteItem>
              ))}
            </AutoCompleteList>
          </>
        )}
      </AutoComplete>
    </Flex>
  );
};

() => {
  const people = [
    {
      name: "Dan Abramov",
      image: "https://bit.ly/dan-abramov",
    },
    {
      name: "Kent Dodds",
      image: "https://bit.ly/kent-c-dodds",
    },
    {
      name: "Segun Adebayo",
      image: "https://bit.ly/sage-adebayo",
    },
    {
      name: "Prosper Otemuyiwa",
      image: "https://bit.ly/prosper-baba",
    },
    {
      name: "Ryan Florence",
      image: "https://bit.ly/ryan-florence",
    },
  ];
  return (
    <Flex
      boxSize="full"
      h="100vh"
      pos="absolute"
      bg={"gray.400"}
      _dark={{
        bg: "gray.600",
      }}
      p={30}
      justifyContent="center"
    >
      <AutoComplete rollNavigation>
        <AutoCompleteInput variant="filled" placeholder="Search..." autoFocus />
        <AutoCompleteList>
          {people.map((person, oid) => (
            <AutoCompleteItem
              key={`option-${oid}`}
              value={person.name}
              textTransform="capitalize"
              align="center"
            >
              <Avatar size="sm" name={person.name} src={person.image} />
              <Text ml="4">{person.name}</Text>
            </AutoCompleteItem>
          ))}
        </AutoCompleteList>
      </AutoComplete>
    </Flex>
  );
};