<template>
  <pre class="vm-json-code vm-scroll">{{ body }}</pre>
</template>

<script setup lang="ts">
import { crudLabel } from '../style'
import { computed } from 'vue'
import { prettyJson } from '../../lib/json'

defineOptions({ name: 'vm-json-code' })

const props = withDefaults(
  defineProps<{
    modelValue?: unknown
    empty?: string
  }>(),
  {
    empty: undefined,
  },
)

const body = computed(() => prettyJson(props.modelValue, props.empty ?? crudLabel('jsonEmpty')))
</script>

<style lang="scss" scoped>
.vm-json-code {
  flex: 1;
  margin: 0;
  min-height: 0;
  overflow: auto;
  padding: 16px 22px;
  border-radius: var(--radius);
  background: var(--muted);
  color: var(--foreground);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
</style>
