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

const props = defineProps({
  theme: {
    type: String,
    default: 'dark'
  }
})

const fill: ComputedRef<string> = computed(() => props.theme === 'dark' ? '#FFF' : '#000')
</script>

<template>
  <svg width="81" height="24" viewBox="0 0 81 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <rect x="48" y="16.0547" width="32.1081" height="7.94595" :fill="fill"/>
  <rect width="32.1081" height="7.94595" :fill="fill"/>
  <rect x="40.0547" y="7.94531" width="7.94595" height="8.10811" :fill="fill"/>
  <rect x="32.1094" y="7.94531" width="7.94595" height="16.0541" :fill="fill"/>
  <rect y="7.94531" width="7.94595" height="16.0541" :fill="fill"/>
  <rect x="40.0547" width="40.0541" height="7.94595" :fill="fill"/>
  </svg>
</template>