<template>
    <svg viewBox="0 0 64 36" class="o-donut-chart" role="graphics-document document">
        <title>{{ localeTitle }}</title>
        <circle class="o-donut-chart__hole" cx="32" cy="18"></circle>
        <circle class="o-donut-chart__ring" cx="32" cy="18" r="15.915" fill="transparent" stroke-width="3.5"></circle>
        <circle class="o-donut-chart__segment" cx="32" cy="18" r="15.915" fill="transparent" stroke-width="4"
            :stroke-dasharray="`${value1} ${100 - value1}`" stroke-dashoffset="25">
            <animate v-if="animation1" attributeName="stroke-dasharray" from="0,100" :to="`${value1} ${100 - value1}`"
                dur="2s" />
        </circle>
        <text y="50%" x="50%" class="o-donut-chart__text-value" transform="translate(0, 2)">
            {{ value1 }}{{ unit1 }}
        </text>
        <text v-if="year1" y="60%" x="50%" class="o-donut-chart__sub-text" transform="translate(0, 2)">
            {{ year1 }}
        </text>
    </svg>
</template>

<script setup lang="ts">
defineProps<{
    value1: number;
    value2?: number;
    unit1?: string;
    unit2?: string;
    year1?: number;
    year2?: number;
    animation1?: boolean;
    animation2?: boolean;
}>();

const locale = navigator.language.split('-')[0]
const localeTitle = locale === 'sv' ? 'Ett munkdiagram' : 'A donut chart';

</script>