<template>
  <section class="card">
    <p class="title">Hello {{ safeName }}</p>
    <p class="subtitle">This is a Vue 3 custom element.</p>
  </section>
</template>

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

const props = defineProps<{ name?: string }>();

const safeName = computed(() => (props.name && props.name.trim()) || 'there');
</script>

<style scoped>
.card {
  display: inline-flex;
  flex-direction: column;
  gap: 0.25rem;
  border: 1px solid #d1d5db;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  background: #ffffff;
  color: #111827;
}

.title {
  margin: 0;
  font-weight: 700;
}

.subtitle {
  margin: 0;
  color: #4b5563;
  font-size: 0.875rem;
}
</style>
