// File: src/components/UIX/Logo/Logo.jsx
// Logo Component - MapleFile branding with icon

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

/**
 * Logo Component - Performance Optimized
 * Displays the MapleFile logo with icon and optional link
 *
 * @param {string} to - Link destination (default: "/")
 * @param {string} size - Logo size: 'sm', 'md', 'lg' (default: 'md')
 * @param {boolean} showText - Whether to show the text (default: true)
 * @param {string} className - Additional CSS classes
 * @param {React.Component} icon - Custom icon component (default: LockClosedIcon)
 */

const SIZE_CONFIG = Object.freeze({
  sm: {
    container: "h-8 w-8",
    icon: "h-4 w-4",
    text: "text-lg",
    iconRadius: "rounded-lg",
  },
  md: {
    container: "h-10 w-10",
    icon: "h-5 w-5",
    text: "text-xl",
    iconRadius: "rounded-xl",
  },
  lg: {
    container: "h-12 w-12",
    icon: "h-6 w-6",
    text: "text-2xl",
    iconRadius: "rounded-xl",
  },
});

const Logo = memo(function Logo({
  to = "/",
  size = "md",
  showText = true,
  className = "",
  icon: Icon = LockClosedIcon,
}) {
  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(
    () => `inline-flex items-center space-x-3 group ${className}`.trim(),
    [className]
  );

  const iconContainerClasses = useMemo(
    () =>
      `relative flex items-center justify-center ${sizeConfig.container} ${themeClasses.bgGradient} ${sizeConfig.iconRadius} shadow-md group-hover:shadow-lg transform group-hover:scale-105 transition-all duration-200`,
    [sizeConfig, themeClasses.bgGradient]
  );

  const textClasses = useMemo(
    () =>
      `${sizeConfig.text} font-bold ${themeClasses.textPrimary} transition-colors duration-200`,
    [sizeConfig.text, themeClasses.textPrimary]
  );

  const content = (
    <>
      <div className="relative">
        <div
          className={`absolute inset-0 ${themeClasses.bgGradient} ${sizeConfig.iconRadius} opacity-0 group-hover:opacity-100 blur-xl transition-opacity duration-300`}
        ></div>
        <div className={iconContainerClasses}>
          <Icon className={`${sizeConfig.icon} text-white`} />
        </div>
      </div>
      {showText && <span className={textClasses}>MapleFile</span>}
    </>
  );

  if (to) {
    return (
      <Link to={to} className={containerClasses}>
        {content}
      </Link>
    );
  }

  return <div className={containerClasses}>{content}</div>;
});

Logo.displayName = "Logo";

export default Logo;
