// File: src/components/UIX/WordGrid/WordGrid.jsx
// WordGrid Component - Display mnemonic words in a numbered grid

import React, { memo, useMemo } from "react";
import { useUIXTheme } from "../themes/useUIXTheme.jsx";

/**
 * WordGrid Component - Performance Optimized
 * Displays words in a grid with numbered labels
 * Commonly used for recovery phrases, mnemonics, or word lists
 *
 * Performance optimizations:
 * - Component memoization with React.memo
 * - Memoized word splitting
 * - Memoized className strings
 *
 * @param {string|Array} words - Space-separated string or array of words
 * @param {number} columns - Number of columns (default: 3)
 * @param {string} className - Additional CSS classes
 */
const WordGrid = memo(function WordGrid({
  words = [],
  columns = 3,
  className = "",
}) {
  const { getThemeClasses } = useUIXTheme();

  // Memoize theme classes
  const themeClasses = useMemo(
    () => ({
      bgCard: getThemeClasses("bg-card"),
      borderSecondary: getThemeClasses("border-secondary"),
      textSecondary: getThemeClasses("text-secondary"),
      textPrimary: getThemeClasses("text-primary"),
    }),
    [getThemeClasses],
  );

  // Convert words to array if string
  const wordArray = useMemo(() => {
    if (typeof words === "string") {
      return words.split(" ").filter(Boolean);
    }
    return Array.isArray(words) ? words : [];
  }, [words]);

  // Memoize grid className based on columns
  const gridClassName = useMemo(() => {
    const colsClass =
      columns === 2
        ? "grid-cols-2"
        : columns === 3
        ? "grid-cols-3"
        : columns === 4
        ? "grid-cols-4"
        : `grid-cols-${columns}`;

    return `grid ${colsClass} gap-4 ${className}`;
  }, [columns, className]);

  if (wordArray.length === 0) return null;

  return (
    <div className={gridClassName}>
      {wordArray.map((word, index) => (
        <div
          key={index}
          className={`${themeClasses.bgCard} border ${themeClasses.borderSecondary} rounded-lg p-3 text-center transform hover:scale-105 transition-transform duration-200 shadow-sm`}
        >
          <span className={`text-xs ${themeClasses.textSecondary} block mb-1`}>{index + 1}</span>
          <span className={`text-base font-mono font-semibold ${themeClasses.textPrimary}`}>
            {word}
          </span>
        </div>
      ))}
    </div>
  );
});

WordGrid.displayName = "WordGrid";

export default WordGrid;
