<script lang="ts" setup name="ToolHeader">
defineProps({
  title: {
    type: String,
    required: false,
  },
})
</script>

<template>
  <div class="tool-header">
    <div class="title">
      {{ title }}
      <slot name="title" />
    </div>
    <div class="center">
      <slot name="center" />
    </div>
    <div class="right">
      <slot name="right" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.tool-header {
    &{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 20px;
        background-color: var(--g-app-bg);
        transition: background-color 0.3s;
    }

  .title {
      font-size: 22px;
      color: var(--el-text-color-primary);
      transition: var(--el-transition-color);
    }

    .center {
        flex: 1;
        font-size: 20px;
        color: var(--el-text-color-secondary);
        transition: var(--el-transition-color);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .right{
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
}
</style>
