<script setup>
import { inject } from 'vue';

const openWinamp = inject('openWinamp');

</script>

<template>
  <div class="desktop">
    <div class="icon" @click="openWinamp">
      <div class="icon-image">[W]</div>
      <div class="icon-label">Winamp</div>
    </div>
  </div>
</template>

<style scoped>
.desktop {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  padding: 2rem;
  align-content: flex-start;
  background-color: transparent; /* Ensure desktop background is transparent */
}

.icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100px;
  text-align: center;
  cursor: pointer;
}

.icon:hover .icon-image {
  background-color: #e0e0e0;
}

.icon-image {
  width: 64px;
  height: 64px;
  border: 2px solid black;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.icon-label {
  background-color: white;
  padding: 2px 4px;
  font-size: 0.8rem;
}
</style>