<script lang='ts'>
  import CalendarDays from 'lucide-svelte/icons/calendar-days'
  import Tv from 'lucide-svelte/icons/tv'

  import StatusDot from '../../StatusDot.svelte'
  import { Load } from '../img'

  import PreviewCard from './preview.svelte'

  import type { Media } from '$lib/modules/anilist/types'

  import { goto } from '$app/navigation'
  import { coverMedium, format, title } from '$lib/modules/anilist/util'
  import { list } from '$lib/modules/auth'
  import { hover } from '$lib/modules/navigate'

  export let media: Media

  let hidden = true

  function onclick () {
    goto(`/app/anime/${media.id}`)
  }
  function onhover (state: boolean) {
    hidden = !state
  }

  $: status = list(media)
</script>

<div class='text-white p-4 cursor-pointer shrink-0 relative pointer-events-auto [content-visibility:auto] [contain-intrinsic-size:auto_152px_auto_290.4px]' class:![content-visibility:visible]={!hidden} class:z-40={!hidden} use:hover={[onclick, onhover]}>
  {#if !hidden}
    <PreviewCard {media} />
  {/if}
  <div class='item w-[9.5rem] flex flex-col'>
    <div class='h-[13.5rem]'>
      <Load src={coverMedium(media)} alt='cover' class='object-cover w-full h-full rounded' color={media.coverImage?.color} />
    </div>
    <div class='pt-3 font-black text-[.8rem] line-clamp-2'>
      {#if status}
        <StatusDot variant={status} />
      {/if}
      {title(media)}
    </div>
    <div class='flex text-neutral-500 mt-auto pt-2 justify-between'>
      <div class='flex text-xs font-medium'>
        <CalendarDays class='w-[1rem] h-[1rem] mr-1 -ml-0.5' />
        {media.seasonYear ?? 'TBA'}
      </div>
      <div class='flex text-xs font-medium'>
        {format(media)}
        <Tv class='w-[1rem] h-[1rem] ml-1 -mr-0.5' />
      </div>
    </div>
  </div>
</div>

<style>
  .item {
    animation: 0.3s ease 0s 1 load-in;
    aspect-ratio: 152/290;
  }
</style>
