<script setup lang="ts">
export interface LeagueRowView {
  id: string;
  isPublished: boolean;
  isPublishing: boolean;
  labels: {
    edit: string;
    createFixture: string;
    publish: string;
    unpublish: string;
    delete: string;
  };
}

defineProps<{
  row: LeagueRowView;
}>();

defineEmits<{
  edit: [];
  createFixture: [];
  togglePublish: [];
  archive: [];
}>();
</script>

<template>
  <div class="league-row-actions">
    <div class="league-action-group">
      <el-button size="small" type="primary" @click.stop="$emit('edit')">
        {{ row.labels.edit }}
      </el-button>
      <el-button size="small" type="primary" @click.stop="$emit('createFixture')">
        {{ row.labels.createFixture }}
      </el-button>
      <el-button
        v-if="!row.isPublished"
        size="small"
        type="success"
        :loading="row.isPublishing"
        @click.stop="$emit('togglePublish')"
      >
        {{ row.labels.publish }}
      </el-button>
      <el-button
        v-else
        size="small"
        type="warning"
        :loading="row.isPublishing"
        @click.stop="$emit('togglePublish')"
      >
        {{ row.labels.unpublish }}
      </el-button>
      <el-button size="small" type="danger" plain @click.stop="$emit('archive')">
        {{ row.labels.delete }}
      </el-button>
    </div>
  </div>
</template>

<style scoped>
.league-row-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px 8px;
  flex-wrap: wrap;
}

.league-action-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 2px 4px;
  border-radius: 8px;
  background: #fbfaf7;
  border: 1px solid var(--border-soft);
}

.league-row-actions :deep(.el-button) {
  margin: 0 !important;
  min-width: 52px;
  min-height: 26px;
  padding: 4px 10px !important;
  font-size: 12px !important;
  font-weight: 700;
  border-radius: 6px;
}

.league-row-actions :deep(.el-button:not(.is-disabled):not(:disabled)) {
  cursor: pointer;
}

.league-row-actions :deep(.el-button.is-disabled),
.league-row-actions :deep(.el-button:disabled) {
  cursor: not-allowed;
}
</style>
