<template>
  <button
    type="button"
    class="status-tile"
    :class="{ 'status-tile--active': active }"
    :aria-pressed="active"
    @click="emit('click')"
  >
    <img :src="image" :alt="label" class="status-tile__image" />
    <p class="status-tile__label">{{ label }}</p>
    <p class="status-tile__count" :style="{ color: countColor }">{{ count }}</p>
  </button>
</template>

<script setup>
defineProps({
  /** Resolved PNG / image src (use a build-time import, e.g. `import img from '@/assets/...'`). */
  image: { type: String, required: true },
  label: { type: String, required: true },
  count: { type: [Number, String], default: 0 },
  /** Hex color for the count number. Defaults to a neutral gray. */
  countColor: { type: String, default: '#4C4C4C' },
  active: { type: Boolean, default: false },
})

const emit = defineEmits(['click'])
</script>

<style lang="scss" scoped>
.status-tile {
  flex: 0 0 12.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  padding: 0.875rem 0.75rem 1rem;
  background: rgba(255, 255, 255, 40%);
  box-shadow: 0 6.75px 19.4px rgba(0, 0, 0, 4%);
  border-radius: 0.75rem;
  border: 1px solid transparent;
  min-height: 7rem;
  cursor: pointer;
  font: inherit;
  text-align: center;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;

  &:hover {
    background: rgba(255, 255, 255, 70%);
  }

  &:focus-visible {
    outline: none;
    border-color: var(--color-primary);
  }

  &--active {
    background: rgba(255, 255, 255, 90%);
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(243, 102, 117, 12%);
  }

  &__image {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: contain;
    flex-shrink: 0;
  }

  &__label {
    font-family: var(--font-family-fa);
    font-weight: 400;
    font-size: 0.95rem;
    line-height: 1.25;
    color: #4c4c4c;
    margin: 0;
  }

  &__count {
    font-family: var(--font-family-en);
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.75;
    margin: 0;
  }
}
</style>
