---
// Properties
const { Image, Link, Title, Description, Table, Sublinks } = Astro.props;

// Configuration
import {DEFAULT_IMAGE_PROXY} from "@utils/GetConfig"

// Toggle Functions
if (Image === null) {
    var UseImage = false
} else {
    var UseImage = true
}
---

<div class="answer-panel">
    <h2>{Title}</h2>
    <a href={Link}>{Link}</a>
    
    <p>{UseImage ? <img src={DEFAULT_IMAGE_PROXY + '/' + Image} style="opacity: 0; transition: 1s opacity;" onload="this.style.opacity = '1'" /> : null} {Description}</p>
    <slot name="table" />
    <slot name="sublinks" />
</div>

<style lang="scss">
.answer-panel {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--box-background);
    transition: 0.6s background, 0.6s color;
    border-radius: 6px;
    padding: 12px;
    color: var(--text);
    * {
        margin: 0px;
    }
    img {
        border-radius: 6px;
        border: 2px rgb(170, 170, 170) solid;
        float: right;
        width: 44%;
        margin: 0px 0px 16px 16px;
    }
    a {
        font-size: 12px;
    }
    p {
        font-size: 16px;
    }
}
</style>
