<script setup lang="ts">
  import type { MediaMetadata } from '@/stores/media.ts'
  import type { User } from '@/stores/userdata.ts'
  import type { Note as NoteData } from '@/stores/note.ts'
  import Note from '@/components/note/Note.vue'
  import { loremIpsum } from 'lorem-ipsum'
  import type { RemoteServer } from '@/stores/remoteServer.ts'

  const sampleMedia = {
    url: "https://mk.absturztau.be/proxy/avatar.webp?url=https%3A%2F%2Fmisskey-taube.s3.eu-central-1.wasabisys.com%2Ffiles%2F40dc29f1-bb92-4df1-a4b7-011287456cf3.webp&avatar=1",
    alt: "valko logo",
    blurred: false,
    mediaType: "image/webp",
    name: "valko-logo.webp",
    ownedBy: "some-user-id",
    remote: false,
    id: "some-media-api"
  } as MediaMetadata;
  const server = {
    isDead: false,
    isSelf: false,
    url: "example.com",
    name: "example",
    id: "some-server-id"
  } as RemoteServer;
  const user = {
    username: "valko",
    displayName: "valko",
    profilePicture: sampleMedia,
    server: server,
  } as User;
  const note = {
    rawContent: loremIpsum({count: 100}),
    hashtags: [],
    owner: user,
    pings: [],
    id: "some-note-id"
  } as NoteData;
</script>

<template>
  <Note :note="note" />
</template>

<style scoped>

</style>
