<script setup lang="ts">
// Node mark + "dezky" wordmark (JetBrains Mono, tracked tight). Ported from
// logos.jsx NodeLockup + NodeWordmark.
import { C } from '~/utils/landingTokens'

const props = withDefaults(defineProps<{
  scale?: number
  fg?: string
  accent?: string
  // Wordmark colour. Defaults to `fg`; pass separately when the squircle and
  // the wordmark need different colours (e.g. on a dark surface the squircle is
  // carbon — invisible — while the wordmark must stay light).
  wordmark?: string
}>(), {
  scale: 1,
  fg: C.carbon,
  accent: C.signal,
})
</script>

<template>
  <div :style="{ display: 'flex', alignItems: 'center', gap: `${18 * scale}px` }">
    <BrandNodeMark :size="72 * scale" :fg="fg" :accent="accent" />
    <span :style="{
      fontFamily: '\'JetBrains Mono\', \'IBM Plex Mono\', ui-monospace, monospace',
      fontWeight: 600,
      fontSize: `${56 * scale * 0.78}px`,
      letterSpacing: '-0.04em',
      color: wordmark || fg,
      lineHeight: 0.9,
    }">dezky</span>
  </div>
</template>
