// File: src/components/UIX/ViewButton/ViewButton.jsx

import React, { memo, useMemo } from "react";
import { Link } from "react-router";
import { ChevronRightIcon } from "@heroicons/react/24/outline";
import { useUIXTheme } from "../themes/useUIXTheme.jsx";

// Move static default values outside component to prevent recreation
const DEFAULT_TEXT = "View";
const DEFAULT_TITLE = "View Details";
const BASE_CLASSES = "inline-flex items-center px-4 py-2 text-base font-bold rounded-lg transition-all duration-200";

/**
 * ViewButton Component - Performance Optimized
 * Standardized view button for list pages in Admin Settings
 *
 * Performance optimizations:
 * - Component memoization with React.memo
 * - Static default values and base classes moved outside component
 * - Memoized theme classes to prevent multiple getThemeClasses calls
 * - Memoized className string
 * - Memoized linkTo computation
 * - Prevented unnecessary re-renders
 *
 * @param {string} basePath - The base route path (e.g., "/admin/settings/tag")
 * @param {string|number} itemId - The item ID for the detail route
 * @param {string} to - Direct route path (overrides basePath/itemId)
 * @param {string} text - Optional custom text (defaults to "View")
 * @param {string} title - Optional custom title attribute (defaults to "View Details")
 * @param {string} className - Optional custom CSS classes (extends default styling)
 * @param {function} onClick - Optional click handler
 */
const ViewButton = memo(function ViewButton({
  basePath,
  itemId,
  to,
  text = DEFAULT_TEXT,
  title = DEFAULT_TITLE,
  className = "",
  onClick,
  ...props
}) {
  const { getThemeClasses } = useUIXTheme();

  // Memoize theme classes to prevent multiple calls on each render
  const themeClasses = useMemo(() => {
    return getThemeClasses('view-button');
  }, [getThemeClasses]);

  // Memoize linkTo computation
  const linkTo = useMemo(() => {
    return to || `${basePath}/${itemId}/detail`;
  }, [to, basePath, itemId]);

  // Memoize className string
  const combinedClassName = useMemo(() => {
    return `${BASE_CLASSES} ${themeClasses} ${className}`;
  }, [themeClasses, className]);

  return (
    <Link
      to={linkTo}
      className={combinedClassName}
      title={title}
      onClick={onClick}
    >
      {text}
      <ChevronRightIcon className="w-5 h-5 ml-2" />
    </Link>
  );
});

// Set display name for React DevTools
ViewButton.displayName = 'ViewButton';

export default ViewButton;