<script lang="ts">
	import type { Component } from 'svelte';

	let {
		class: klass = '',
		src,
		alt = '',
		size = 32,
		black = false
	}: {
		class?: string;
		src?: Component | string;
		alt?: string;
		size?: number;
		black?: boolean;
	} = $props();

	const IconComponent: Component | undefined = $derived(
		typeof src === 'function' ? src : undefined
	);

	function isUrl(src?: string) {
		return src?.startsWith('/') || src?.startsWith('http');
	}
</script>

<span
	class="{klass} {black ? 'fill-slate-950' : 'fill-slate-50'} hover-icon"
	style:width="{size}px"
	style:height="{size}px"
>
	{#if IconComponent}
		<IconComponent width={size} height={size} color={black ? '#020618' : '#f8fafc'} />
	{:else if typeof src === 'string' && isUrl(src)}
		<img {src} {alt} width={size} height={size} />
	{:else}
		{alt ?? 'Без иконки'}
	{/if}
</span>

<style>
	@import '$src/app.css';

	.hover-icon {
		@apply block text-sm uppercase transition-all;

		img {
			margin: 0;
		}
	}
</style>
