import React from 'react';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import useThemeClass from '@/utils/hooks/useThemeClass';
import { Link } from 'react-router-dom';
import useDarkMode from '@/utils/hooks/useDarkMode';

const ActionLink = (props) => {
  const { children, className, themeColor = true, to, href = '', ...rest } = props;

  const { textTheme } = useThemeClass();
  const [isDark] = useDarkMode();

  const classNameProps = {
    className: classNames(
      textTheme,
      themeColor && 'text-nafithBlueColor-500 dark:text-gray-100',
      !isDark && 'hover:text-sky-950 dark:hover:text-gray-100',
      'hover:underline',
      className,
    ),
  };

  return to ? (
    <Link to={to} {...classNameProps} {...rest}>
      {children}
    </Link>
  ) : (
    <a href={href} {...classNameProps} {...rest}>
      {children}
    </a>
  );
};

ActionLink.propTypes = {
  themeColor: PropTypes.bool,
  to: PropTypes.string,
};

ActionLink.defaultProps = {
  themeColor: true,
};

export default ActionLink;
