import React from 'react';
import { Link, NavLink } from 'react-router-dom';
import styled from 'styled-components';
export const Navigation = () => {
  return /*#__PURE__*/ React.createElement(
    NavWrapper,
    null,
    /*#__PURE__*/ React.createElement(
      'ul',
      null,
      /*#__PURE__*/ React.createElement(
        'li',
        null,
        /*#__PURE__*/ React.createElement(
          NavLink,
          {
            to: '/',
          },
          'Forms'
        )
      ),
      /*#__PURE__*/ React.createElement(
        'li',
        null,
        /*#__PURE__*/ React.createElement(
          NavLink,
          {
            to: '/templates/',
          },
          'templates'
        )
      )
    )
  );
};
export const FormBuilderNavigation = ({ activeTab, setActiveTab }) => {
  return /*#__PURE__*/ React.createElement(
    NavWrapper,
    null,
    /*#__PURE__*/ React.createElement(
      'ul',
      null,
      /*#__PURE__*/ React.createElement(
        'li',
        {
          onClick: () => setActiveTab('questions'),
        },
        /*#__PURE__*/ React.createElement(
          Link,
          {
            to: '#',
            className: activeTab === 'questions' ? 'active' : '',
          },
          'Questions'
        )
      ),
      /*#__PURE__*/ React.createElement(
        'li',
        {
          onClick: () => setActiveTab('results'),
        },
        /*#__PURE__*/ React.createElement(
          Link,
          {
            to: '#',
            className: activeTab === 'results' ? 'active' : '',
          },
          'Results'
        )
      )
    )
  );
};
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) {
//       }
//     }
//   }
// `;
