<script setup lang="ts">
import { useAdminLocale } from '../composables/useAdminLocale';

const { t } = useAdminLocale();
</script>

<template>
  <div class="admin-row-actions" @click.stop>
    <el-dropdown trigger="click" @click.stop>
      <el-button link type="primary" size="small" @click.stop>
        {{ t('common.actions') }}
        <span class="admin-row-actions__caret" aria-hidden="true">▾</span>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu class="admin-row-actions__menu">
          <slot />
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<style scoped>
.admin-row-actions {
  display: inline-flex;
  justify-content: center;
  width: 100%;
}

.admin-row-actions :deep(.el-button) {
  min-height: 26px;
  padding: 0 9px !important;
  border: 1px solid var(--border) !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  color: var(--text) !important;
  font-weight: 700 !important;
}

.admin-row-actions :deep(.el-button:hover) {
  background: var(--accent-hover) !important;
  border-color: #d5cfc3 !important;
}

.admin-row-actions__caret {
  margin-left: 3px;
  font-size: 11px;
  opacity: 0.85;
}

.admin-row-actions__menu :deep(.el-dropdown-menu__item) {
  font-size: 13px;
  line-height: 1.35;
  padding: 7px 16px;
  max-width: 300px;
  white-space: normal;
}

.admin-row-actions__menu :deep(.action-warning) {
  color: var(--el-color-warning);
}

.admin-row-actions__menu :deep(.action-danger) {
  color: var(--el-color-danger);
}
</style>
