import React from 'react';
import { Link, NavLink } from 'react-router-dom';
import styled from 'styled-components';

export const Navigation = () => {
  return (
    <NavWrapper>
      <ul>
        <li>
          <NavLink to="/">Forms</NavLink>
        </li>
        <li>
          <NavLink to="/templates/">templates</NavLink>
        </li>
      </ul>
    </NavWrapper>
  );
};

export const FormBuilderNavigation = ({ activeTab, setActiveTab }) => {
  return (
    <NavWrapper>
      <ul>
        <li onClick={() => setActiveTab('questions')}>
          <Link to="#" className={activeTab === 'questions' ? 'active' : ''}>
            Questions
          </Link>
        </li>
        <li onClick={() => setActiveTab('results')}>
          <Link to="#" className={activeTab === 'results' ? 'active' : ''}>
            Results
          </Link>
        </li>
      </ul>
    </NavWrapper>
  );
};

const NavWrapper = styled.nav`
  ul {
    display: flex;
    align-items: center;

    a {
      display: block;
      padding: 1rem 1rem;
      text-transform: capitalize;
      color: var(--co-grey);
      position: relative;
      font-size: 1.6rem;
      &:before {
        content: '';
        position: absolute;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: transparent;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
      }
      &.active {
        color: var(--co-primary);
        &:before {
          background: var(--co-primary);
        }
      }
      @media (min-width: 768px) {
        padding: 1rem 2rem;
      }
    }
  }
`;
// const NavWrapperVertical = styled.nav`
//   ul {
//     a {
//       display: block;
//       padding: 1rem 0;
//       text-transform: capitalize;
//       color: var(--co-body);
//       position: relative;
//       font-size: 1.6rem;
//       font-family: var(--ff-medium);
//       &.active {
//         color: var(--co-primary);
//       }
//       @media (min-width: 768px) {
//       }
//     }
//   }
// `;
