<script setup>
defineEmits(['select']);

const props = defineProps({
  departments: Object,
});
</script>

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

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      <button
        v-for="department in departments"
        :key="department.id"
        @click="$emit('select', department)"
        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">
          {{ department.name }}
        </h3>
        <p class="text-gray-600 text-sm">
          {{ department.description }}
        </p>
      </button>
    </div>
  </div>
</template>
