// File: src/components/UIX/AuthPageHeader/AuthPageHeader.jsx
// AuthPageHeader Component - Centered icon with title for auth pages

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

/**
 * AuthPageHeader Component - Performance Optimized
 * Displays a centered icon with title for authentication page headers
 *
 * @param {string} title - The page title
 * @param {React.Component} icon - Icon component to display
 * @param {string} size - Size variant: 'sm', 'md', 'lg' (default: 'md')
 * @param {string} className - Additional CSS classes
 * @param {boolean} animate - Whether to animate on load (default: true)
 * @param {boolean} showGlow - Whether to show glow effect (default: true)
 */

const SIZE_CONFIG = Object.freeze({
  sm: {
    container: "h-12 w-12",
    icon: "h-6 w-6",
    title: "text-2xl",
    radius: "rounded-xl",
    glowInset: "-inset-0.5",
  },
  md: {
    container: "h-16 w-16",
    icon: "h-8 w-8",
    title: "text-3xl",
    radius: "rounded-2xl",
    glowInset: "-inset-1",
  },
  lg: {
    container: "h-20 w-20",
    icon: "h-10 w-10",
    title: "text-4xl",
    radius: "rounded-3xl",
    glowInset: "-inset-1.5",
  },
});

const AuthPageHeader = memo(function AuthPageHeader({
  title,
  icon: Icon,
  size = "md",
  className = "",
  animate = true,
  showGlow = true,
}) {
  const { getThemeClasses } = useUIXTheme();

  const sizeConfig = SIZE_CONFIG[size] || SIZE_CONFIG.md;

  const themeClasses = useMemo(
    () => ({
      bgGradient: getThemeClasses("bg-gradient-secondary"),
      textPrimary: getThemeClasses("text-primary"),
    }),
    [getThemeClasses]
  );

  const containerClasses = useMemo(
    () =>
      `text-center ${animate ? "animate-fade-in-up" : ""} ${className}`.trim(),
    [animate, className]
  );

  const iconContainerClasses = useMemo(
    () =>
      `flex items-center justify-center ${sizeConfig.container} ${themeClasses.bgGradient} ${sizeConfig.radius} shadow-lg`,
    [sizeConfig, themeClasses.bgGradient]
  );

  const glowClasses = useMemo(
    () =>
      `absolute ${sizeConfig.glowInset} ${themeClasses.bgGradient} ${sizeConfig.radius} blur opacity-20`,
    [sizeConfig, themeClasses.bgGradient]
  );

  const titleClasses = useMemo(
    () => `${sizeConfig.title} font-bold ${themeClasses.textPrimary}`,
    [sizeConfig.title, themeClasses.textPrimary]
  );

  return (
    <div className={containerClasses}>
      {Icon && (
        <div className="flex justify-center mb-6">
          <div className="relative">
            <div className={iconContainerClasses}>
              <Icon className={`${sizeConfig.icon} text-white`} />
            </div>
            {showGlow && <div className={glowClasses}></div>}
          </div>
        </div>
      )}
      {title && <h1 className={titleClasses}>{title}</h1>}
    </div>
  );
});

AuthPageHeader.displayName = "AuthPageHeader";

export default AuthPageHeader;
