<template>
  <div class="svc" @click="emit('show-details', service)">
    <div class="svc__heading">
      <p class="svc__title">{{ service.title }}</p>
      <p class="svc__subtitle">شماره درخواست : {{ service.requestNumber }}</p>
    </div>

    <div class="svc__meta">
      <Badge
        variant="neutral"
        size="sm"
        icon="chat"
        :label="`نوع خدمت :`"
        :value="service.typeLabel"
      />
      <Badge :variant="tone" size="sm" dot :value="service.statusLabel" />
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import Badge from '@/components/Badge.vue'

const TONE_MAP = {
  approved: 'success',
  rejected: 'danger',
  pending: 'neutral',
  open: 'neutral',
  answered: 'success',
  closed: 'info',
}

const props = defineProps({
  service: { type: Object, required: true },
})

const emit = defineEmits(['show-details'])

const tone = computed(() => TONE_MAP[props.service.status] || 'neutral')
</script>

<style lang="scss" scoped>
.svc {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  background: rgba(255, 255, 255, 58%);
  box-shadow: 0 6.75px 19.425px rgba(0, 0, 0, 4%);
  border-radius: 0.75rem;
  margin-bottom: 0.625rem;
  cursor: pointer;
  transition: background 0.15s ease;

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

  @media (min-width: 1024px) {
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
    padding: 0.875rem 2rem;
  }

  &__heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: end;
    gap: 0.125rem;

    @media (min-width: 1024px) {
      min-width: 7rem;
    }
  }

  &__title {
    font-family: var(--font-family-fa);
    font-weight: 400;
    font-size: 0.95rem;
    color: #4b4b4b;
    margin: 0;
  }

  &__subtitle {
    font-family: var(--font-family-fa);
    font-weight: 400;
    font-size: 0.7rem;
    color: #4b4b4b;
    margin: 0;
  }

  &__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;

    @media (min-width: 1024px) {
      flex: 1;
      justify-content: center;
    }
  }
}
</style>
