<script setup lang="ts">
import { computed } from 'vue';

type WeatherGlyphKind =
  | 'clear'
  | 'partly'
  | 'cloudy'
  | 'fog'
  | 'rain'
  | 'snow'
  | 'storm'
  | 'sunrise'
  | 'sunset'
  | 'air'
  | 'visibility'
  | 'humidity'
  | 'wind';

const props = defineProps<{
  kind: WeatherGlyphKind;
  large?: boolean;
}>();

// 统一收细线宽和轮廓，让图标在墨水屏和小尺寸卡片里更精致、更稳定。
const strokeWidth = computed(() => (props.large ? 1.95 : 1.8));
</script>

<template>
  <svg
    :class="['glyph', { 'glyph--large': props.large }]"
    viewBox="0 0 48 48"
    fill="none"
    stroke="currentColor"
    stroke-linecap="round"
    stroke-linejoin="round"
    :stroke-width="strokeWidth"
    aria-hidden="true"
  >
    <g v-if="props.kind === 'clear'">
      <circle cx="24" cy="24" r="6.5" />
      <line x1="24" y1="8.5" x2="24" y2="12.5" />
      <line x1="24" y1="35.5" x2="24" y2="39.5" />
      <line x1="8.5" y1="24" x2="12.5" y2="24" />
      <line x1="35.5" y1="24" x2="39.5" y2="24" />
      <line x1="13.1" y1="13.1" x2="15.9" y2="15.9" />
      <line x1="32.1" y1="32.1" x2="34.9" y2="34.9" />
      <line x1="13.1" y1="34.9" x2="15.9" y2="32.1" />
      <line x1="32.1" y1="15.9" x2="34.9" y2="13.1" />
    </g>

    <g v-else-if="props.kind === 'partly'">
      <circle cx="16.5" cy="16.5" r="5" />
      <line x1="16.5" y1="7.5" x2="16.5" y2="10.5" />
      <line x1="9.2" y1="16.5" x2="12.2" y2="16.5" />
      <line x1="11.4" y1="11.4" x2="13.6" y2="13.6" />
      <line x1="21.6" y1="11.4" x2="19.4" y2="13.6" />
      <path d="M15.5 31.5h15.8a5.7 5.7 0 1 0-.5-11.3 8.4 8.4 0 0 0-15.3-1.7 6.2 6.2 0 0 0 0 13Z" />
    </g>

    <g v-else-if="props.kind === 'cloudy'">
      <path d="M13 31.5h18.8a6.3 6.3 0 1 0-.6-12.5 9.4 9.4 0 0 0-17.2-2.1A7 7 0 0 0 13 31.5Z" />
    </g>

    <g v-else-if="props.kind === 'fog'">
      <path d="M13 25.5h18.8a6.3 6.3 0 1 0-.6-12.5 9.4 9.4 0 0 0-17.2-2.1A7 7 0 0 0 13 25.5Z" />
      <path d="M11 31c2 0 3-1 5-1s3 1 5 1 3-1 5-1 3 1 5 1 3-1 5-1" />
      <path d="M14 36c1.7 0 2.6-.8 4.3-.8s2.6.8 4.3.8 2.6-.8 4.3-.8 2.6.8 4.3.8" />
    </g>

    <g v-else-if="props.kind === 'rain'">
      <path d="M13 26.5h18.8a6.3 6.3 0 1 0-.6-12.5 9.4 9.4 0 0 0-17.2-2.1A7 7 0 0 0 13 26.5Z" />
      <path d="M16 31c0 1.9-1.2 3.4-2.7 3.4s-2.7-1.5-2.7-3.4c0-1.6 2.7-4.9 2.7-4.9S16 29.4 16 31Z" />
      <path d="M25.4 34.2c0 1.8-1.1 3.2-2.4 3.2s-2.4-1.4-2.4-3.2c0-1.5 2.4-4.5 2.4-4.5s2.4 3 2.4 4.5Z" />
      <path d="M34.8 31c0 1.9-1.2 3.4-2.7 3.4s-2.7-1.5-2.7-3.4c0-1.6 2.7-4.9 2.7-4.9s2.7 3.3 2.7 4.9Z" />
    </g>

    <g v-else-if="props.kind === 'snow'">
      <path d="M13 26.5h18.8a6.3 6.3 0 1 0-.6-12.5 9.4 9.4 0 0 0-17.2-2.1A7 7 0 0 0 13 26.5Z" />
      <g>
        <line x1="16.5" y1="30.5" x2="16.5" y2="38.5" />
        <line x1="13" y1="34.5" x2="20" y2="34.5" />
        <line x1="13.8" y1="31.8" x2="19.2" y2="37.2" />
        <line x1="19.2" y1="31.8" x2="13.8" y2="37.2" />
      </g>
      <g>
        <line x1="31.5" y1="30.5" x2="31.5" y2="38.5" />
        <line x1="28" y1="34.5" x2="35" y2="34.5" />
        <line x1="28.8" y1="31.8" x2="34.2" y2="37.2" />
        <line x1="34.2" y1="31.8" x2="28.8" y2="37.2" />
      </g>
    </g>

    <g v-else-if="props.kind === 'storm'">
      <path d="M13 26.5h18.8a6.3 6.3 0 1 0-.6-12.5 9.4 9.4 0 0 0-17.2-2.1A7 7 0 0 0 13 26.5Z" />
      <path d="M24.5 29.5l-4 7h4.4l-2 8 7.6-10h-4.8l2.3-5Z" />
    </g>

    <g v-else-if="props.kind === 'sunrise'">
      <line x1="10" y1="33" x2="38" y2="33" />
      <path d="M16 33a8 8 0 0 1 16 0" />
      <line x1="24" y1="10" x2="24" y2="16" />
      <polyline points="21,13 24,10 27,13" />
      <line x1="15" y1="26" x2="17.5" y2="23.5" />
      <line x1="33" y1="26" x2="30.5" y2="23.5" />
    </g>

    <g v-else-if="props.kind === 'sunset'">
      <line x1="10" y1="33" x2="38" y2="33" />
      <path d="M16 33a8 8 0 0 1 16 0" />
      <line x1="24" y1="10" x2="24" y2="16" />
      <polyline points="21,13 24,16 27,13" />
      <line x1="15" y1="26" x2="17.5" y2="28.5" />
      <line x1="33" y1="26" x2="30.5" y2="28.5" />
    </g>

    <g v-else-if="props.kind === 'air'">
      <path d="M10 17c4.2 0 4.2-3 8.4-3s4.2 3 8.4 3 4.2-3 8.4-3" />
      <path d="M13 24c3.8 0 3.8-2.5 7.6-2.5s3.8 2.5 7.6 2.5 3.8-2.5 7.6-2.5" />
      <path d="M10 31c4.2 0 4.2-3 8.4-3s4.2 3 8.4 3 4.2-3 8.4-3" />
    </g>

    <g v-else-if="props.kind === 'visibility'">
      <path d="M6 24c3.1-4.8 8.8-8 18-8s14.9 3.2 18 8c-3.1 4.8-8.8 8-18 8S9.1 28.8 6 24Z" />
      <circle cx="24" cy="24" r="4.8" />
      <circle cx="24" cy="24" r="1.5" fill="currentColor" stroke="none" />
    </g>

    <g v-else-if="props.kind === 'humidity'">
      <path d="M24 10C20.5 15 16 20.4 16 27a8 8 0 0 0 16 0c0-6.6-4.5-12-8-17Z" />
      <path d="M24 30.5a4.6 4.6 0 0 0 4.4-3.1" />
    </g>

    <g v-else-if="props.kind === 'wind'">
      <path d="M10 17h17c3.3 0 5.5-2 5.5-4.8 0-2.4-1.9-4.2-4.4-4.2-2.1 0-3.7 1.2-4.4 3" />
      <path d="M10 25h22c2.8 0 4.8 1.8 4.8 4.2 0 2.3-1.8 4.1-4.1 4.1-1.9 0-3.4-.9-4.2-2.4" />
      <path d="M10 33h11c2.5 0 4.3 1.6 4.3 3.8 0 2.1-1.7 3.7-3.9 3.7-1.6 0-2.9-.7-3.7-2" />
    </g>
  </svg>
</template>

<style scoped>
.glyph {
  width: 1.12rem;
  height: 1.12rem;
  flex-shrink: 0;
  color: currentColor;
  overflow: visible;
}

.glyph--large {
  width: 2.7rem;
  height: 2.7rem;
}
</style>
