import React, { forwardRef, memo } from "react";

import { SVGProps } from "react";
// Импорт 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";
import LikeIcon from "../../../public/images/icons/like.svg";
import StarIcon from "../../../public/images/icons/star.svg";
import VkIcon from "../../../public/images/icons/vk.svg";
import DzenIcon from "../../../public/images/icons/dzen.svg";
import TgIcon from "../../../public/images/icons/tg.svg";
import AdIcon from "../../../public/images/icons/ad.svg";
import LengthMinIcon from "../../../public/images/icons/length-min.svg";
import LengthMaxIcon from "../../../public/images/icons/length-max.svg";
import PriceMinIcon from "../../../public/images/icons/price-min.svg";
import PriceMaxIcon from "../../../public/images/icons/price-max.svg";
import BoatYearMinIcon from "../../../public/images/icons/boat-year-min.svg";
import BoatYearMaxIcon from "../../../public/images/icons/boat-year-max.svg";
import PinIcon from "../../../public/images/icons/pin.svg";
import HeartIcon from "../../../public/images/icons/heart.svg";
import ShareIcon from "../../../public/images/icons/share.svg";
import ReviewStarIcon from "../../../public/images/icons/review-star.svg";

// Объект с иконками для удобного доступа
const icons = {
    calendar: CalendarIcon,
    map: MapIcon,
    money: MoneyIcon,
    people: PeopleIcon,
    logo: LogoIcon,
    restart: RestartIcon,
    anchor: AnchorIcon,
    width: WidthIcon,
    like: LikeIcon,
    star: StarIcon,
    vk: VkIcon,
    dzen: DzenIcon,
    tg: TgIcon,
    ad: AdIcon,
    lengthMin: LengthMinIcon,
    lengthMax: LengthMaxIcon,
    priceMin: PriceMinIcon,
    priceMax: PriceMaxIcon,
    boatYearMin: BoatYearMinIcon,
    boatYearMax: BoatYearMaxIcon,
    pin: PinIcon,
    heart: HeartIcon,
    share: ShareIcon,
    reviewStar: ReviewStarIcon,
};

export type IconName =
    | "calendar"
    | "map"
    | "money"
    | "people"
    | "logo"
    | "restart"
    | "anchor"
    | "width"
    | "like"
    | "star"
    | "vk"
    | "dzen"
    | "tg"
    | "ad"
    | "lengthMin"
    | "lengthMax"
    | "priceMin"
    | "priceMax"
    | "boatYearMin"
    | "boatYearMax"
    | "pin"
    | "heart"
    | "share"
    | "reviewStar";

export interface IconProps
    extends Omit<SVGProps<SVGSVGElement>, "name" | "preserveAspectRatio"> {
    name: IconName;
    className?: string;
    size?: number | string;
    color?: string;
    preserveAspectRatio?: boolean;
    maxSize?: number | string;
}

// Компонент 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" />
 * ```
 */
