// File Path: src/components/UIX/BackToDetailsButton/BackToDetailsButton.jsx
// BackToDetailsButton Component - Performance Optimized

import React, { memo, useMemo } from "react";
import { InformationCircleIcon } from "@heroicons/react/24/outline";

// Static base classes - moved outside to prevent recreation
const BASE_BUTTON_CLASSES = [
  "inline-flex",
  "items-center",
  "px-4",
  "py-2",
  "border",
  "border-gray-300",
  "rounded-lg",
  "text-sm",
  "font-medium",
  "text-gray-700",
  "bg-white",
  "hover:bg-gray-50",
  "hover:border-gray-400",
  "focus:outline-none",
  "focus:ring-2",
  "focus:ring-offset-2",
  "focus:ring-blue-500",
  "transition-all",
  "duration-200",
  "shadow-sm",
  "hover:shadow-md",
].join(" ");

// Icon classes constant
const ICON_CLASSES = "w-4 h-4 mr-2";

/**
 * BackToDetailsButton Component - Performance Optimized
 * Navigation button for returning to details page
 *
 * @param {Function} onClick - Click handler function
 * @param {string} className - Additional CSS classes
 * @param {string} text - Button text (defaults to "Back to Details")
 * @param {string} title - Button title/tooltip (defaults to "Return to details page")
 */
const BackToDetailsButton = memo(
  function BackToDetailsButton({
    onClick,
    className = "",
    text = "Back to Details",
    title = "Return to details page",
  }) {
    // Memoize button classes only when className changes
    const buttonClasses = useMemo(() => {
      if (!className) {
        return BASE_BUTTON_CLASSES;
      }
      return `${BASE_BUTTON_CLASSES} ${className}`;
    }, [className]);

    return (
      <button
        type="button"
        onClick={onClick}
        className={buttonClasses}
        title={title}
        aria-label={title}
      >
        <InformationCircleIcon className={ICON_CLASSES} aria-hidden="true" />
        {text}
      </button>
    );
  },
  (prevProps, nextProps) => {
    // Custom comparison function - only re-render when these props actually change
    return (
      prevProps.onClick === nextProps.onClick &&
      prevProps.className === nextProps.className &&
      prevProps.text === nextProps.text &&
      prevProps.title === nextProps.title
    );
  },
);

// Display name for debugging
BackToDetailsButton.displayName = "BackToDetailsButton";

export default BackToDetailsButton;
