import React from 'react';
import { useState } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

const Root = styled.ul`
  list-style: none;
  padding: 8px;
  margin: 0;
`;

const ListItem = styled.li`
  position: relative;
  line-height: 1;

  a {
    display: block;
    padding: 8px 14px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 8px;
  }

  ${props =>
    !props.active &&
    `
    a:hover {
      background: ${props.theme.colors.grey.v50};
    }
  `};

  ${props =>
    props.active &&
    `
    a {
      background: ${props.theme.colors.grey.v200};
    }
    
    &::before {
      content: "";
      position: absolute;
      top: calc(50% - 12px);
      left: -8px;
      width: 4px;
      height: 24px;
      background: ${props.theme.colors.primary};
      border-radius: 6px;
    }
  `};
`;

const QuickNav = ({ items }) => {
  const [activeIndex, setActiveIndex] = useState(false);

  return (
    <Root>
      {items.map((item, index) => {
        return (
          <ListItem key={item.name + index} active={index == activeIndex || 0} onClick={() => setActiveIndex(index)}>
            <a href={item.url}>{item.name}</a>
          </ListItem>
        );
      })}
    </Root>
  );
};

QuickNav.propTypes = {
  items: PropTypes.array.isRequired
};

export default QuickNav;