<script setup lang="tsx">
/** @jsxImportSource vue */
import { Ticker } from "motion-plus-vue"
import { motion } from "motion-v"
import { defineComponent } from "vue"

const Box = defineComponent({
  props: {
    src: String,
    title: String
  },
  setup(props) {
    return () => (
      <motion.div class="item" initial="hideInfo" whileHover="showInfo">
        <motion.img
          style={{ width: "100%", height: "100%" }}
          src={`/photos/boxart/${props.src}.png`}
          alt={props.title + " boxart"}
          variants={{
            hideInfo: { scale: 1, filter: "blur(0px)", opacity: 1 },
            showInfo: { scale: 0.9, filter: "blur(5px)", opacity: 0.3 },
          }}
        />
        <motion.div
          class="title"
          variants={{
            hideInfo: { opacity: 0, scale: 1.2 },
            showInfo: { opacity: 1, scale: 1 },
          }}
        >
          {props.title}
        </motion.div>
      </motion.div>
    )
  }
})


</script>

<template>
  <Ticker
    :hover-factor="0"
    :style="{
      maskImage: 'linear-gradient(to right, transparent 5%, black 10%, black 90%, transparent 95%)',
      maxWidth: '100%'
    }"
  >
     <Box src="sonic3" title="Sonic 3" />
     <Box src="shinobi" title="Shinobi" />
     <Box src="sonic1" title="Sonic 1" />
     <Box src="streetsofrage2" title="Street Fighter 2" />
  </Ticker>
</template>


<style>
.item {
  width: 180px;
  height: 255px;
  overflow: hidden;
  position: relative;
}

.title {
  color: #f5f5f5;
  padding: 10px;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-shadow: 1px 1px 0px #000;
}
</style>