<script lang="ts">
	import { ripple } from "svelte-ripple-action";
	import { deleteNotification, type Notification } from "../NotificationProvider/shared"
	import type { RippleOptions } from "svelte-ripple-action/dist/constants";
	import Cross1 from "radix-svelte-icons/src/lib/icons/Cross1.svelte";
	import { fade } from "svelte/transition";

	export let notification: Notification;

	const rippleOptions: RippleOptions = {
		center: false,
		color: "rgba(113, 128, 150, 0.1)",
	};
</script>

<div class="cursor-pointer hover:bg-base-100 h-auto w-full rounded-none no-animation focus:shadow-none text-left flex flex-row items-center" out:fade={{duration: 200, delay: 50}}>
	<div title="Ansehen" use:ripple={rippleOptions} class="px-4 py-2">
		<h4 class="text-base text-base-content font-semibold">{@html notification.title}</h4>
		<span class="opacity-65 text-sm">{@html notification.description}</span>
	</div>
	<button title="Entfernen" on:click={() => {
		deleteNotification(notification.uid);
	}} class="h-24 px-4 hover:bg-base-100 flex items-center justify-center border-l border-l-base-300 no-animation" use:ripple={rippleOptions}>
		<Cross1 size={22} />
	</button>
</div>
