<script lang="ts">
import tooltip from "$lib/Tooltip/tooltip";
import { executiveCopy } from "$lib/Utility/executiveMode";
import aprilFools from "$stores/aprilFools";
import type { Title } from "./mediaTitle";

export let time: number | undefined = undefined;
export let count = -1337;
export let title: Title = {
	title: "Media List",
	hint: "This is a media list.",
};
export let progress: undefined | number = undefined;
export let hideTime = false;
export let hideCount = false;
</script>

<summary>
  <span title={title.hint || undefined} use:tooltip
    >{executiveCopy($aprilFools, title.title)}</span
  >
  {#if !hideCount}[{count === -1337 ? '...' : count}]{/if}
  <!-- {#if !hideCount}[{#if count === -1337}...{:else}<NumberTicker
				end={count}
				duration={Math.min(2500, Math.max(500, Math.abs(count - 0) * 10))}
			/>{/if}]{/if} -->
  {#if !hideTime}
    <small class="opaque">{time ? time.toFixed(3) : '...'}s</small>
  {/if}
  <slot />
  {#if progress !== undefined}
    <button class="badge unclickable-button button-badge badge-info">
      {progress.toFixed(0)}%
    </button>
  {/if}
</summary>
