<template>
  <NCard>
    <NCollapse accordion default-expanded-names='code' display-directive='show' :trigger-areas="['arrow']">
      <NCollapseItem name='code'>
        <template #header>{{ language }}</template>
        <template #header-extra>
          <NFlex>
            <NButton :bordered='false' v-ripple style='font-size: 24px;' @click='copyCode'>
              <NIcon>
                <files />
              </NIcon>
            </NButton>
          </NFlex>
        </template>
        <template #arrow>
          <NIcon>
            <angleRight />
          </NIcon>
        </template>
        <NCode show-line-numbers :code='code' />
      </NCollapseItem>
    </NCollapse>
  </NCard>
</template>
<script setup>
import {
  angleRight,
  arrowTurnDown,
  files,
  notification
} from '~/utils';
const {
  code,
  language
} = defineProps([
    'code',
    'language'
  ]),
  copyCode = async () => {
    try {
      await navigator.clipboard.writeText(code);
      notification.success({
        title: '复制成功',
        duration: 2500,
        closable: false,
        keepAliveOnHover: true
      });
    } catch(e) {
      notification.error({
        title: '复制失败',
        duration: 2500,
        closable: false,
        keepAliveOnHover: true
      });
    }
  };
</script>