<script setup lang="ts">
import type { IconType } from '@bagelink/vue'
import { Icon } from '@bagelink/vue'
import { ref } from 'vue'
import Btn from './Btn.vue'

interface Props {
	message?: string
	thin?: boolean
	outline?: boolean
	dismissable?: boolean
	type?: 'info' | 'warning' | 'error'
	icon?: IconType | 'none'
}

withDefaults(
	defineProps<Props>(),
	{
		type: 'info',
	},
)

const isDismissed = ref(false)

const color = {
	info: 'var(--bgl-primary)',
	warning: 'var(--bgl-yellow)',
	error: 'var(--bgl-red)',
}
</script>

<template>
	<div v-if="!isDismissed" class="alert" :class="[type, { thin, outline }]" :dismissable="dismissable">
		<Icon v-if="icon !== 'none'" class="alert_icon" :icon="icon || type" :size="1.7" :color="color[type]" />
		<slot>
			<p class="m-0">
				{{ message }}
			</p>
		</slot>
		<Btn flat thin class="alert_close" icon="close" @click="isDismissed = true" />
	</div>
</template>

<style scoped>
.alert {
  --alert-outline: var(--bgl-primary);
  --alert-bg: var(--bgl-primary-light);
  padding: var(--btn-padding);
  border-radius: var(--card-border-radius);
  background: var(--alert-bg);
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  position: relative;
}

.alert.info {
  --alert-outline: var(--bgl-primary);
  --alert-bg: var(--bgl-primary-light);
}

.alert.warning {
  --alert-outline: var(--bgl-yellow);
  --alert-bg: var(--bgl-yellow-light);
}

.alert.error {
  --alert-outline: var(--bgl-red);
  --alert-bg: var(--bgl-red-light);
  color: var(--bgl-red);
}

.alert.thin {
  padding: 1rem;
}

.alert.outline {
  outline: 1px solid var(--alert-outline);
  background: unset;
}

.alert_icon {
  line-height: 1;
}

.alert_close {
  display: none;
  position: absolute;
  inset-inline-end: 1.5rem;
}

.alert[dismissable="true"] .alert_close {
  display: block;
}

.alert[dismissable="true"] p {
  width: calc(100% - 5rem);
}
</style>
