---
export interface Props {
    title: string;
    icon: string;
    children: any;
    className?: string;
}

const { title, icon, className = "" } = Astro.props;

const icons: Record<string, string> = {
    phone: "M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z",
    email: "M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z",
    location: "M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z M15 11a3 3 0 11-6 0 3 3 0 016 0z",
    clock: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
};
---

<div class={`group relative bg-white/80 backdrop-blur-xl border border-white/50 rounded-2xl p-6 hover:border-[var(--color-gold)]/50 transition-all duration-500 hover:shadow-2xl hover:shadow-[var(--color-gold)]/10 hover:-translate-y-1 ${className}`}>
    <!-- Декоративный градиент при hover -->
    <div class="absolute inset-0 bg-gradient-to-br from-[var(--color-gold)]/5 via-transparent to-[var(--color-blue-primary)]/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-2xl"></div>

    <div class="relative z-10 flex flex-col items-center text-center sm:items-start sm:text-left">
        <!-- Улучшенная иконка с градиентом -->
        <div class="w-14 h-14 bg-gradient-to-br from-[var(--color-blue-primary)] to-blue-600 rounded-2xl flex items-center justify-center mb-5 shadow-lg shadow-blue-500/25 group-hover:shadow-xl group-hover:shadow-[var(--color-gold)]/20 group-hover:scale-105 transition-all duration-300">
            <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
                <path stroke-linecap="round" stroke-linejoin="round" d={icons[icon] || icons.phone}></path>
            </svg>
        </div>

        <h3 class="text-xs font-bold text-gray-400 uppercase tracking-widest mb-3 group-hover:text-[var(--color-gold)] transition-colors duration-300">{title}</h3>

        <div class="contents text-gray-900 w-full">
            <slot />
        </div>
    </div>
</div>
