/* eslint-disable react/no-danger */
import React from 'react';
import PropTypes from 'prop-types';
import { GrFormNext } from '@react-icons/all-files/gr/GrFormNext';
import Link from 'gatsby-core-theme/src/hooks/link';
import { splitSearchQuery } from '../../../../helpers/splitSearchQuery';

const SoftwareProvider = ({
  item = {},
  Button = <GrFormNext title="Right-pointing Arrow Icon" />,
  searchQuery,
}) => (
  <Link to={item.path} className="software-provider-gtm">
    <h1
      dangerouslySetInnerHTML={{
        __html: splitSearchQuery(item.title, searchQuery),
      }}
    />
    {Button}
  </Link>
);

SoftwareProvider.propTypes = {
  item: PropTypes.shape({
    title: PropTypes.string,
  }).isRequired,
  Button: PropTypes.func,
  searchQuery: PropTypes.string,
};

export default SoftwareProvider;
