<script setup lang="ts">
import { useRouter } from 'vue-router';

const router = useRouter();

defineProps({
  forkCount: {
    default: 0
  }
});
</script>

<template>
  <div class="fork-button flex items-center px-3.5 cursor-pointer">
    <div @click="router.push({ name: 'repoForkCreate' })" class="flex items-center">
      <Icon name="gt-fork" class="mr-2"></Icon>
      <span class="text-G900 mr-2">Fork</span>
    </div>
    <span class="text-CG600 hover:text-link" @click="router.push({ name: 'repoFork' })">
      <Number :number="forkCount || 0" />
    </span>
  </div>
</template>

<style scoped lang="scss">
@import 'devui-theme/styles-var/devui-var.scss';
.fork-button {
  height: 32px;
  background: var(--color-linear100);
  border-radius: 3px;
  border: 1px solid var(--color-border);
}
</style>
