<template>
  <div class="box">
    <div
      :style="{
        color: props.config.color,
        fontSize: props.config.fontSize + 'px',
        fontWeight: props.config.fontWeight,
        textAlign: props.config.textAlign,
        lineHeight: props.config.lineHeight + 'px',
      }"
    >
      {{ props.config.title }}
    </div>
  </div>
</template>

<script setup lang="ts">
  import { titleProperties } from '../config/properties';
  import { DesktopComponent } from '/@/enums/desktop';
  import { TitleConfig } from '/@/model/desktop/designer';

  const props = withDefaults(
    defineProps<{
      type: DesktopComponent;
      w: number;
      h: number;
      config: TitleConfig;
    }>(),
    {
      type: DesktopComponent.TITLE,
      w: 0,
      h: 0,
      config: () => {
        return titleProperties;
      },
    },
  );
</script>

<style lang="less" scoped></style>
