<script lang="ts">
    import { apiBaseURL } from "../../../config"
    import { mediaLibrary } from "../../store"

    export let col: Column
    export let pageId: string
</script>

<div class="infoBoard">
    <div class="header">
        <div class="icon">
            <img
                src="{`${apiBaseURL}medialib/${col.infoBoard.icon}/${$mediaLibrary[col.infoBoard.icon]?.file?.src}`}"
                alt="{$mediaLibrary[col.infoBoard.icon]?.alt || ''}"
                title="{$mediaLibrary[col.infoBoard.icon]?.title || ''}"
            />
        </div>
        <div class="title">
            {col.infoBoard.title}
            <div></div>
        </div>
    </div>
    <div class="content">
        {@html col.infoBoard.text}
    </div>
</div>

<style lang="less">
    @import "../../assets/css/main.less";
    .infoBoard {
        display: flex;
        flex-direction: column;
        padding: 15px;
        gap: 40px;
        .header {
            display: flex;
            align-items: center;
            gap: 20px;
            .icon {
                width: 64px;
                height: 64px;
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }
            }
            .title {
                font-size: 1.5rem;
                display: flex;
                flex-direction: column;
                div {
                    border-bottom: 1px solid @bg-color-secondary;
                    width: 50px;
                }
            }
        }
        .content {
            text-align: left;
        }
    }
</style>
