"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DatasetToolButton = exports.DatasetToolStyle = void 0;
const react_1 = __importDefault(require("react"));
const styled_1 = __importDefault(require("@emotion/styled"));
const react_router_dom_1 = require("react-router-dom");
const Tooltip_1 = require("../tooltip/Tooltip");
const Icon_1 = require("../icon/Icon");
const react_router_dom_2 = require("react-router-dom");
exports.DatasetToolStyle = styled_1.default.span(props => `
  display: flex;
  margin: 0 auto 10px;
  flex-basis: auto;
  padding: 0 15px;
  justify-content: center;
  a {
    color: var(--current-theme-primary);
    font-size: 17px;
    text-decoration: none;
    font-weight: 400;
    padding: 4px;
    border-bottom: 2px solid transparent;
    border-bottom-color: ${props.active ? 'var(--current-theme-primary)' : 'transparent'};
    i {
      margin-right: 6px;
      font-size: 15px;
    }
    &:hover {
      border-bottom-color: var(--current-theme-primary);
    }
  }
`);
const DatasetToolButton = ({ path, icon, tooltip, label }) => {
    const location = (0, react_router_dom_2.useLocation)();
    return (react_1.default.createElement(exports.DatasetToolStyle, { active: location.pathname == path },
        react_1.default.createElement(Tooltip_1.Tooltip, { tooltip: tooltip, flow: "up" },
            react_1.default.createElement(react_router_dom_1.Link, { to: path },
                react_1.default.createElement(Icon_1.Icon, { icon: `fa ${icon}`, label: label })))));
};
exports.DatasetToolButton = DatasetToolButton;
