import { type Component, type JSXElement, Show, mergeProps } from 'solid-js';
import { FaSolidCircleExclamation } from 'solid-icons/fa';

// Типы пропсов
interface InputGroupProps {
    id: string;              // ID для связки label с input
    label: string;           // Текст заголовка
    icon: JSXElement;        // Иконка слева
    children: JSXElement;    // Сам input/select/textarea
    error?: string;          // Текст ошибки (если есть)
    accentColor?: 'amber' | 'red' | 'blue'; // Цвет фокуса
}

// Карта цветов для фокуса (можно вынести в отдельный конфиг, если используется везде)
const colorMap = {
    amber: 'focus-within:border-amber-500 focus-within:ring-1 focus-within:ring-amber-500',
    red: 'focus-within:border-red-500 focus-within:ring-1 focus-within:ring-red-500',
    blue: 'focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500'
};

const InputGroup: Component<InputGroupProps> = (rawProps) => {
    // Устанавливаем значение по умолчанию для цвета, если не передано
    const props = mergeProps({ accentColor: 'amber' as const }, rawProps);

    // Вычисляем класс для цвета фокуса
    const focusColorClass = () => colorMap[props.accentColor];

    return (
        <div class="relative">
            {/* Плавающий лейбл сверху */}
            <label
                for={props.id}
                class="absolute -top-2 left-2 inline-block bg-white px-1 text-xs font-medium z-10 text-gray-700"
            >
                {props.label}
            </label>

            {/* Контейнер для иконки и инпута */}
            <div
                class={`
                    flex items-center border rounded-md shadow-sm transition-colors duration-200
                    ${props.error
                    ? 'border-red-500 bg-red-50/10' // Стиль при ошибке
                    : `border-gray-300 bg-white ${focusColorClass()}` // Обычный стиль + цвет фокуса
                }
                `}
            >
                {/* Иконка слева */}
                <div
                    class={`mx-3 flex-shrink-0 transition-colors ${props.error ? 'text-red-400' : 'text-gray-400'}`}
                >
                    {props.icon}
                </div>

                {/* Сюда вставляется input, select или phone-input */}
                {props.children}
            </div>

            {/* Блок вывода ошибки снизу */}
            <Show when={props.error}>
                <p
                    id={`${props.id}-error`}
                    class="mt-1 text-xs text-red-600 flex items-center gap-1 animate-fadeIn"
                    role="alert"
                >
                    <FaSolidCircleExclamation /> {props.error}
                </p>
            </Show>
        </div>
    );
};

export default InputGroup;