<template>
  <view class="pickable-form-item">
    <text class="pickable-form-item__title">{{ title }}</text>
    <text class="pickable-form-item__value" :class="{ 'is-placeholder': isPlaceholder }">
      {{ displayValue }}
    </text>
    <AtIcon value="chevron-right" size="24" :color="themeTokens.color.textDisabled" />
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { themeTokens } from '@/theme/tokens'

const props = defineProps<{
  title: string
  value?: string
  placeholder: string
}>()

const isPlaceholder = computed(() => !props.value)
const displayValue = computed(() => props.value || props.placeholder)
</script>

<style lang="scss">
@use "sass:color";

.pickable-form-item {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 76px;
  padding: 24px 0;
  font-size: $font-lg;
  line-height: 1.5;
  color: $text-primary;
  background: $bg-page;
}

.pickable-form-item::after {
  position: absolute;
  inset: -50%;
  box-sizing: border-box;
  pointer-events: none;
  content: "";
  border: 0 solid color.mix(#fff, $color-border-base, 30%);
  border-bottom-width: 1px;
  transform: scale(0.5);
  transform-origin: center;
}

.pickable-form-item__title {
  flex: 0 0 172px;
  margin-right: $space-sm;
  color: $text-regular;
}

.pickable-form-item__value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: $text-primary;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pickable-form-item__value.is-placeholder {
  color: $text-placeholder;
}
</style>
