<template>
  <svg :width="size" :height="size" :viewBox="viewBox || '0 0 100 100'" xmlns="http://www.w3.org/2000/svg">
    <!-- 天平底座 -->
    <rect x="35" y="75" width="30" height="6" rx="2" :fill="mainColor" />
    <rect x="48" y="45" width="4" height="30" :fill="accentColor" />
    <!-- 天平横杆 -->
    <rect x="10" y="42" width="80" height="5" rx="2" :fill="accentColor" />
    <!-- 天平左边盘子（往中间移） -->
    <path d="M28 47 L38 47 L35 58 L31 58 Z" :fill="accentColor" />
    <path d="M25 58 Q33 65 41 58" fill="none" :stroke="accentColor" stroke-width="2" />
    <!-- 天平右边盘子 -->
    <path d="M62 47 L72 47 L69 58 L65 58 Z" :fill="accentColor" />
    <path d="M59 58 Q67 65 75 58" fill="none" :stroke="accentColor" stroke-width="2" />
    <!-- 天平顶装饰 -->
    <circle cx="50" cy="38" r="5" :fill="mainColor" />
    <polygon points="50,30 52,36 58,36 53,40 55,46 50,42 45,46 47,40 42,36 48,36" :fill="accentColor" />
    <!-- 书本（放在天平左侧） -->
    <rect x="8" y="48" width="10" height="22" rx="1" :fill="mainColor" :stroke="accentColor" stroke-width="1.5" />
    <line x1="13" y1="52" x2="13" y2="68" :stroke="accentColor" stroke-width="0.5" />
    <line x1="9" y1="56" x2="17" y2="56" :stroke="accentColor" stroke-width="0.5" />
    <line x1="9" y1="62" x2="17" y2="62" :stroke="accentColor" stroke-width="0.5" />
  </svg>
</template>

<script lang="ts" setup>
defineOptions({ name: 'JusticeIcon' })

interface Props {
  size?: number | string
  viewBox?: string
  mainColor?: string
  accentColor?: string
}

withDefaults(defineProps<Props>(), {
  size: 80,
  viewBox: '0 0 100 100',
  mainColor: '#c41e3a', // 红色
  accentColor: '#ffd700' // 金色
})
</script>
