<template>
    <td
        class="hc-info-table-td p-2"
        :class="[center ? 'text-center' : '', isTitle ? 'title-name' : '', ui]"
        :style="width ? `width: ${width};` : ''"
        hc-border="1 solid #ddd"
        :colspan="colspan"
    >
        <slot />
    </td>
</template>

<script setup>
defineProps({
    ui: {
        type: String,
        default: '',
    },
    center: {
        type: Boolean,
        default: false,
    },
    isTitle: {
        type: Boolean,
        default: false,
    },
    width: {
        type: [String, Number],
        default: '180px',
    },
    colspan: {
        type: [String, Number],
        default: '1',
    },
})

defineOptions({
    name: 'HcInfoTableTd',
})
</script>

<style scoped lang="scss">
.hc-info-table-td {
    position: relative;
    color: #333333;
    background-color: white;
    &.title-name {
        background: #f9f9f9;
    }
}
</style>
