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

const LinkIcons = ({ link, title, svg }) => {
  return /*#__PURE__*/ React.createElement(
    React.Fragment,
    null,
    /*#__PURE__*/ React.createElement(
      LinkIcon,
      {
        to: link,
      },
      /*#__PURE__*/ React.createElement(
        'svg',
        null,
        /*#__PURE__*/ React.createElement('use', {
          href: `/images/icons.svg#${svg}`,
        })
      ),
      /*#__PURE__*/ React.createElement('span', null, title)
    )
  );
};

export default LinkIcons;
const LinkIcon = styled(NavLink)`
  background: transparent;
  font-weight: 500;
  font-family: var(--ff-medium);
  display: flex;
  align-items: center;
  color: var(--co-body);
  padding: 1rem;
  svg {
    width: 18px;
    height: 18px;
  }
  span {
    margin-left: 1rem;
  }
`;
