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

const emit = defineEmits(['select']);

const props = defineProps({
  mainRoles: Object,
  selectedDepartment: Object,
});

const departmentMainRoles = computed(() => {
  return props.mainRoles.filter(role =>
    role.department && role.department.id === props.selectedDepartment.id
  );
});
</script>

<template>
  <div class="w-full">
    <div class="mb-6 mt-12">
      <h2 class="text-xl font-semibold mb-2">
        {{ $t('mainRole.inDepartment') }}
      </h2>
      <p class="text-gray-600">{{ $t('mainRole.select.description') }}</p>
    </div>

    <div v-if="departmentMainRoles.length > 0" class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <button
        v-for="mainRole in departmentMainRoles"
        :key="mainRole.id"
        @click="$emit('select', mainRole)"
        class="group p-6 border-2 border-gray-200 rounded-lg hover:border-primary hover:bg-primary/5 transition-all duration-200 text-left focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
      >
        <h3 class="font-semibold text-lg mb-2 group-hover:text-primary transition-colors">
          {{ mainRole.name }}
        </h3>
        <p class="text-gray-600 text-sm">
          {{ mainRole.description}}
        </p>
      </button>
    </div>

    <div v-else class="text-center py-12">
      <p class="text-gray-500 text-lg">{{ $t('mainRole.noRolesInDepartment') }}</p>
    </div>
  </div>
</template>
