import Link from 'next/link';
import React from 'react';
import { Flex, Label, Text, Switch, Box, Tabs } from 'gestalt';
import 'gestalt/dist/gestalt.css';

export default () => {
  const [activeIndex, setActiveIndex] = React.useState(0);
  const [wrap, setWrap] = React.useState(false);

  const handleChange = ({ activeTabIndex, event }) => {
    event.preventDefault();
    setActiveIndex(activeTabIndex);
  };

  const menu = [
    { href: '/download', text: 'Download' },
    // { href: '/note', text: 'My note' },
    { href: '/', text: 'Log in' },
    { href: '/', text: 'Try Missage', indicator: 'dot' },
  ];

  return (
    <Flex alignItems="start" direction="column" gap={4}>
      <Box borderStyle="sm" color="lightGray" maxWidth={10000} padding={1}>
        <Tabs
          activeTabIndex={activeIndex}
          bgColor="transparent"
          onChange={handleChange}
          tabs={menu}
          wrap={wrap}
        />
      </Box>
    </Flex>
  );
};