import { defineComponent, computed } from 'vue';
import './CMyDivider.scss';

export default defineComponent({
  name: 'CMyDivider',
  props: {
    label: { type: String, default: '' },
    color: { type: String, default: '' }, // quasar key o hex
    size: { type: Number, default: 1 },   // px
    dotted: { type: Boolean, default: false },
    inset: { type: Boolean, default: false },
    marginY: { type: Number, default: 0 }
  },
  setup(props) {
    const qColor = computed(() =>
      props.color && !props.color.startsWith('#') ? props.color : undefined
    );
    const sizePx = computed(() => props.size + 'px');
    const sepClass = computed(() => (props.dotted ? 'is-dotted' : ''));

    const styleVars = computed(() => {
      const style: Record<string, string> = {};
      if (props.marginY != null) style.margin = `${props.marginY}px 0`;
      if (props.color && props.color.startsWith('#')) style['--divider-color'] = props.color;
      return style;
    });

    return { styleVars, qColor, sepClass, sizePx, inset: props.inset, label: props.label };
  }
});