<script setup lang="ts">
import { Icon } from '@iconify/vue'
import SlideItem from '@/components/slide/SlideItem.vue'
import { formatCount, longVideos } from '@/mock/homeData'

defineProps({ active: { type: Boolean, default: false } })
</script>

<template>
  <SlideItem>
    <div class="long-video">
      <div v-for="item in longVideos" :key="item.id" class="card">
        <img :src="item.cover" class="cover" alt="" />
        <div class="body">
          <p class="title">{{ item.title }}</p>
          <p class="sub">@{{ item.author }} · {{ item.duration }}</p>
          <span class="play">
            <Icon icon="solar:play-circle-linear" />
            {{ formatCount(item.play_count) }}
          </span>
        </div>
      </div>
    </div>
  </SlideItem>
</template>

<style scoped lang="less">
.long-video {
  height: 100%;
  overflow-y: auto;
  background: #111;
  padding: 10rem;

  .card {
    display: flex;
    gap: 12rem;
    margin-bottom: 12rem;
    background: rgb(29, 29, 29);
    border-radius: 8rem;
    overflow: hidden;

    .cover {
      width: 120rem;
      height: 68rem;
      object-fit: cover;
      flex-shrink: 0;
    }

    .body {
      padding: 8rem 10rem 8rem 0;
      color: white;

      .title {
        font-size: 14rem;
        margin: 0 0 6rem;
      }

      .sub {
        font-size: 12rem;
        opacity: 0.6;
        margin: 0 0 6rem;
      }

      .play {
        font-size: 12rem;
        display: flex;
        align-items: center;
        gap: 4rem;
        opacity: 0.8;
      }
    }
  }
}
</style>
