<script setup lang="ts">
import { computed } from 'vue';

defineOptions({ name: 'ReadonlyField' });

interface Props {
  value?: string | number | null;
  placeholder?: string;
}

const props = withDefaults(defineProps<Props>(), {
  value: '',
  placeholder: '--'
});

const displayValue = computed(() => {
  if (props.value === null || props.value === undefined || props.value === '') {
    return props.placeholder;
  }
  return String(props.value);
});
</script>

<template>
  <div class="readonly-field">
    {{ displayValue }}
  </div>
</template>

<style scoped>
.readonly-field {
  display: flex;
  align-items: center;
  width: 100%;
  height: 32px;
  padding: 0 12px;
  border-radius: 4px;
  background: linear-gradient(180deg, rgb(241 245 249 / 98%), rgb(226 232 240 / 94%)), rgb(241 245 249);
  box-shadow: 0 0 0 1px rgb(203 213 225 / 96%) inset;
  color: rgb(51 65 85 / 96%);
  font-size: 14px;
  cursor: default;
}
</style>
