<script lang="ts">
	import MdiIcon from './MdiIcon.svelte';

	let { icon, title = '', onclick, disabled = false, variant = 'default', size = 16, class: className = '' } = $props<{
		icon: string;
		title?: string;
		onclick?: (e: MouseEvent) => void;
		disabled?: boolean;
		variant?: 'default' | 'danger' | 'success';
		size?: number;
		class?: string;
	}>();
</script>

<button type="button" {title} {onclick} {disabled}
	class="icon-btn icon-btn-{variant} {className}"
>
	<MdiIcon name={icon} {size} />
</button>

<style>
	.icon-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2rem;
		height: 2rem;
		border-radius: 0.5rem;
		border: none;
		background: transparent;
		cursor: pointer;
		transition: all 0.2s ease;
	}

	.icon-btn:disabled {
		opacity: 0.4;
		pointer-events: none;
	}

	.icon-btn-default {
		color: var(--color-muted-foreground);
	}
	.icon-btn-default:hover {
		color: var(--color-foreground);
		background: var(--color-muted);
	}

	.icon-btn-danger {
		color: var(--color-muted-foreground);
	}
	.icon-btn-danger:hover {
		color: var(--color-destructive);
		background: var(--color-error-bg);
		box-shadow: 0 0 8px rgba(239, 68, 68, 0.15);
	}

	.icon-btn-success {
		color: var(--color-muted-foreground);
	}
	.icon-btn-success:hover {
		color: var(--color-success-fg);
		background: var(--color-success-bg);
		box-shadow: 0 0 8px rgba(5, 150, 105, 0.15);
	}
</style>
