<template>
  <NuxtImg 
    loading="lazy"
    role="presentation"
    :alt="alt"
    :class="type ? `svg-${type}` : ''"
    :style="`width: ${size || 26}px;`"
    :src="name.includes('https://') > 0 ? name : `/icon/${name || 'check.svg'}`"
  />
</template>
<script>
export default {
  props: ["name", "size", "type", "alt"],
};
</script>
<style>

/* primary: $blue-dianne (#204853) */
.svg-primary {
  filter: invert(19%) sepia(18%) saturate(1514%) hue-rotate(151deg) brightness(97%) contrast(85%);
}

/* secondary: $fiord (#3c5b63) */
.svg-secondary {
  filter: invert(27%) sepia(12%) saturate(1506%) hue-rotate(153deg) brightness(96%) contrast(87%);
}

/* accent: $parchment (#f2e5d6) */
.svg-accent {
  filter: invert(93%) sepia(13%) saturate(1217%) hue-rotate(331deg) brightness(101%) contrast(90%);
}

/* findata/info/warning: $sirocco (#758385) */
/* Cả ba đều dùng chung bộ lọc này */
.svg-findata, 
.svg-info,
.svg-warning {
  filter: invert(56%) sepia(10%) saturate(301%) hue-rotate(167deg) brightness(92%) contrast(82%);
}

/* danger: $danger-red (#f14668) */
.svg-danger {
  filter: invert(34%) sepia(91%) saturate(2465%) hue-rotate(332deg) brightness(100%) contrast(97%);
}

/* success: $forest-green (#2F7C4E) */
.svg-success {
  filter: invert(20%) sepia(21%) saturate(2657%) hue-rotate(119deg) brightness(97%) contrast(86%);
}

/* dark: $cutty-sark (#566c72) */
.svg-dark {
  filter: invert(36%) sepia(11%) saturate(1009%) hue-rotate(152deg) brightness(96%) contrast(85%);
}

/* light: $pearl-bush (#e3d8cb) */
.svg-light {
  filter: invert(92%) sepia(21%) saturate(233%) hue-rotate(334deg) brightness(100%) contrast(91%);
}

/* twitter: $pewter (#959b99) */
.svg-twitter {
  filter: invert(70%) sepia(7%) saturate(271%) hue-rotate(170deg) brightness(94%) contrast(89%);
}

/* Các màu cơ bản tiện ích */
.svg-white {
  filter: brightness(0) invert(1);
}
.svg-black {
  filter: invert(0%) sepia(100%) saturate(0%) hue-rotate(235deg) brightness(107%) contrast(107%);
}
</style>
