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

const TabSwitch = () => {
  return (
    <SwitchWrapper>
      <ul>
        <li>
          <NavLink to="/forms">Forms</NavLink>
        </li>
        <li>
          <NavLink to="/templates">templates</NavLink>
        </li>
      </ul>
    </SwitchWrapper>
  );
};

export default TabSwitch;

const SwitchWrapper = 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;
      }
    }
  }
`;
