import React, { forwardRef, memo } from "react";
import { IconProps } from "../../types/icon";

// Импорт SVG иконок как React компонентов
import CalendarIcon from "../../../public/images/icons/calendar.svg";
import MapIcon from "../../../public/images/icons/map.svg";
import MoneyIcon from "../../../public/images/icons/money.svg";
import PeopleIcon from "../../../public/images/icons/people.svg";
import LogoIcon from "../../../public/images/icons/logo.svg";
import RestartIcon from "../../../public/images/icons/restart.svg";
import AnchorIcon from "../../../public/images/icons/anchor.svg";
import WidthIcon from "../../../public/images/icons/width.svg";

// Объект с иконками для удобного доступа
const icons = {
    calendar: CalendarIcon,
    map: MapIcon,
    money: MoneyIcon,
    people: PeopleIcon,
    logo: LogoIcon,
    restart: RestartIcon,
    anchor: AnchorIcon,
    width: WidthIcon,
};

// Компонент Icon оптимизированный для Next.js
export const Icon = memo(
    forwardRef<SVGSVGElement, IconProps>(
        ({ name, className = "", size = 24, color, ...props }, ref) => {
            const IconComponent = icons[name];

            if (!IconComponent) {
                console.warn(`Icon "${name}" not found`);
                return null;
            }

            const style = {
                width: typeof size === "number" ? `${size}px` : size,
                height: typeof size === "number" ? `${size}px` : size,
                ...(color && { fill: color }),
            };

            // Проверяем, что IconComponent является функцией/компонентом
            // if (typeof IconComponent !== "function") {
            //     console.warn(`Icon "${name}" is not a valid React component`);
            //     return null;
            // }

            // Создаем элемент с правильными пропсами
            return React.createElement(IconComponent, {
                ref,
                className,
                style,
                ...props,
            });
        }
    )
);

Icon.displayName = "Icon";

// Экспорт по умолчанию для совместимости
export default Icon;

/**
 * Компонент Icon для отображения SVG иконок в Next.js
 *
 * Особенности:
 * - Оптимизирован для Next.js с использованием SVGR
 * - Поддержка forwardRef для доступа к DOM элементу
 * - Мемоизация для улучшения производительности
 * - Поддержка всех стандартных SVG пропсов
 *
 * Примеры использования:
 * ```tsx
 * // Базовое использование
 * <Icon name="calendar" size={32} />
 *
 * // С кастомными стилями
 * <Icon name="map" size="24px" color="#3B82F6" className="hover:opacity-80" />
 *
 * // С дополнительными SVG пропсами
 * <Icon name="money" size={20} color="green" onClick={handleClick} />
 *
 * // С ref для прямого доступа к элементу
 * const iconRef = useRef<SVGSVGElement>(null);
 * <Icon ref={iconRef} name="people" size={28} />
 *
 * // Новые иконки
 * <Icon name="logo" size={40} />
 * <Icon name="restart" size={24} color="#6B7280" />
 * ```
 */
