---
import MicroBlog from "../../components/MicroBlog.astro";
import MastodonLogo from "./MastodonLogo.astro";
import ImageGrid from "../../components/ImageGrid.astro";
import Video from "../../components/Video.astro";
import Poll from "../../components/Poll.astro";
import AudioPlayer from "../../components/AudioPlayer.astro";
import type { MastodonMicroBlogProps } from "./transform_data";

type Props = MastodonMicroBlogProps
const props = Astro.props;

---

<MicroBlog {...props}>
  <a href="https://joinmastodon.org/" slot="logo"><MastodonLogo/></a>
  <div slot="supplemental">
    {props.images && Boolean(props.images?.length) && <ImageGrid media={props.images} class="mb-5"/>}
    {props.video && <Video src={props.video.src} poster={props.video.poster} class="mb-5"/>}
    {props.poll && <Poll {...props.poll} class="mb-5"/>}
    {props.audio && <AudioPlayer {...props.audio} class="mb-5"/>}
  </div>
  <div slot="metadata">
    · 
    <span><a href={`${props.url}/reblogs`} class="no-underline"><span class="font-bold">{props.reblogsCount}</span> Boosts</a></span> · 

    <span><a href={`${props.url}/favourites`} class="no-underline"><span class="font-bold">{props.favouritesCount}</span> Favourites</a></span> · 

    <span><a href={`${props.url}`} class="no-underline"><span class="font-bold">{props.repliesCount}</span> Replies</a></span>
  </div>
</MicroBlog>