import React from 'react';
import useRenderTracker from '../../hooks/useRenderTracker';

interface QuickActionButtonProps {
  title: string;
  description: string;
  onClick: () => void;
}

const QuickActionButton: React.FC<QuickActionButtonProps> = ({ title, description, onClick }) => {
  useRenderTracker('QuickActionButton', { title, description, onClick });

  return (
    <button 
      className="bg-gray-200/15 hover:bg-gray-200/50 dark:bg-secondary/10 dark:hover:bg-secondary/20 p-2 sm:p-4 border border-gray-300/80 dark:border-none dark:border-gray-600 rounded-xl shadow-sm hover:shadow-lgp transition-all duration-0 ease-in-out w-full text-left"
      onClick={onClick}
    >
      <h4 className="font-bold sm:text-[0.95rem] text-[.85rem] sm:mb-2 mb-1 text-gray-700 dark:text-gray-300 max-sm:truncate">
        {title}
      </h4>
      <p className="text-[.8rem] sm:text-sm text-gray-500 dark:text-gray-400 max-sm:truncate">
        {description}
      </p>
    </button>
  );
};

export default React.memo(QuickActionButton);