---
import { authService } from '@/lib/authService';

const { tagline, socialIcons } = Astro.props;

// Получаем данные из коллекции site_settings
const pb = authService.createClientFromRequest(Astro.request);
const records = await pb.collection('site_settings').getList(1, 1, {
  sort: '-created'  // Берём самую последнюю запись
});

const siteSettings = records.items[0] || {};
const logoPath = siteSettings.site_logo
  ? `${pb.baseURL}/api/files/site_settings/${siteSettings.id}/${siteSettings.site_logo}`
  : null;
---

{tagline && (
    <div class="col-span-2 md:col-span-3 lg:col-span-1 space-y-5">
        {logoPath ? (
            <a href="/" aria-label="Zur Startseite wechseln">
                <div class="relative flex items-center justify-start">
                    <img
                        src={logoPath}
                        alt="MinivanBerlin Logo"
                        width="50"
                        height="20"
                        class="object-contain object-left max-w-full"
                    />
                </div>
            </a>
        ) : (
            // Можно добавить placeholder элемент, если логотип не установлен
            <div class="relative flex items-center justify-start">
                <div class="text-gray-400 italic" style="width: 50px; height: 20px; display: flex; align-items: center; justify-content: center;">
                    Logo
                </div>
            </div>
        )}
        <p class="text-gray-600 text-sm leading-relaxed">{tagline}</p>
        {socialIcons && socialIcons.length > 0 && (
            <div class="space-y-4 pt-2">
                <h3 class="text-base font-semibold text-gray-900 mb-2">
                    Folgen Sie uns
                </h3>
                <div class="flex space-x-4">
                    {socialIcons.map((social) => (
                            <a
                                    href={social.url}
                                    class={`text-gray-500 ${social.hoverColorClass} text-xl transition-all duration-300 hover:scale-110 social-icon`}
                                    aria-label={`Folgen Sie uns auf ${social.name}`}
                                    target="_blank"
                                    rel="noopener noreferrer"
                                    set:html={social.svg}
                            ></a>
                    ))}
                </div>
            </div>
        )}
    </div>
)}

<style>
    .social-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
    }

    .social-icon svg {
        width: 100%;
        height: 100%;
    }
</style>
