---
// Properties
const {
    VideoId,
    CreatorId,
    Title,
    Thumbnail,
    Date,
    Views,
    Length,
    Platform
} = Astro.props

// Components
import { Image } from 'astro:assets';
---

<a href={"/watch?v=" + VideoId} class="fl-vi">
    <div class="fl-vi-thumbnail">
        <Image src={Thumbnail} alt={'Thumbnail'} inferSize={true} loading="eagerly" format="webp"/>
        <!-- <p>{Platform}</p> -->
        <p>{Length}</p>
    </div>
    <div class="fl-vi-content">
        <Image src={'https://image.proxy.sudovanilla.org/https://invidious.private.coffee/ggpht/ytc/AIdro_lAKf-vZLoTI-gZUoP5Y3gbdGd07E4eDHUhTee6aOzDCnU=s900-c-k-c0x00ffffff-no-rj'} alt={'Creator Avatar'} inferSize={true} loading="lazy" format="webp"/>
        <div>
            <p><strong>{Title}</strong></p>
            <span>{Date} - {Views}</span>
        </div>
    </div>
</a>

<style lang="scss">
.fl-vi {
    color: white;
    text-decoration: none;
    .fl-vi-thumbnail {
        position: relative;
        img {
            width: 100%;
            height: 100%;
            border-radius: 6px;
        }
        p {
            position: absolute;
            bottom: 0px;
            right: 12px;
            background: rgba(0,0,0,0.8);
            border-radius: 3rem;
            padding: 6px 12px;
            font-size: 14px;
        }
    }
    .fl-vi-content {
        display: flex;
        gap: 12px;
        * {margin: 0px;}
        img {
            width: 32px;
            height: 32px;
            border-radius: 3rem;
        }
        strong {
            max-width: 100%;
            overflow: hidden;
            white-space: wrap;
            text-overflow: ellipsis;
            display: inline-grid;
        }
        span {
            font-size: 14px;
            opacity: 0.5;
        }
    }
}
</style>