/**
 * HelpButton Component
 *
 * A contextual help button that appears at the top-right of pages
 * and links to the relevant help documentation.
 */

import React from 'react';
import { Link } from 'react-router-dom';
import { HelpCircle } from 'lucide-react';
import { useTranslation } from 'react-i18next';

interface HelpButtonProps {
  helpPath: string;
  className?: string;
}

const HelpButton: React.FC<HelpButtonProps> = ({ helpPath, className = '' }) => {
  const { t } = useTranslation();

  return (
    <Link
      to={helpPath}
      className={`inline-flex items-center gap-1.5 px-3 py-1.5 text-sm text-gray-500 dark:text-gray-400 hover:text-brand-600 dark:hover:text-brand-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors ${className}`}
      title={t('common.help', 'Help')}
    >
      <HelpCircle size={18} />
      <span className="hidden sm:inline">{t('common.help', 'Help')}</span>
    </Link>
  );
};

export default HelpButton;