import type { QualityComponentDefinition } from '../core/types';

import { QUALITY_ICONS } from '../core/icons';
import { QUALITY_CATEGORY } from '../core/types';

export const dividerDefinition: QualityComponentDefinition = {
  type: 'Divider',
  name: 'divider',
  label: '分隔线',
  category: QUALITY_CATEGORY.BASIC,
  icon: QUALITY_ICONS.divider,
  aiHint: '内容之间的横向分隔线。不要用它代替表格边框。',
  defaults: { color: '#d9d9d9', thickness: 1, spacing: 8 },
  propertySchema: [
    { key: 'color', label: '线条颜色', type: 'string', defaultValue: '#d9d9d9' },
    { key: 'thickness', label: '线条粗细(px)', type: 'number', defaultValue: 1 },
    { key: 'spacing', label: '上下间距(px)', type: 'number', defaultValue: 8 },
  ],
  dataSchema: [],
  buildContent: (properties) => ({
    tagName: 'hr',
    style: {
      margin: `${Number(properties.spacing ?? 8)}px 0`,
      border: 'none',
      'border-top': `${Number(properties.thickness ?? 1)}px solid ${String(properties.color ?? '#d9d9d9')}`,
    },
  }),
};