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

	export let disabled = false;

	const dispatch = createEventDispatcher();

	function handleClick() {
		if (!disabled) {
			dispatch('click');
		}
	}
</script>

<button
	class="stop-button"
	class:disabled
	on:click={handleClick}
	{disabled}
	aria-label="Alle Agents sofort stoppen"
>
	<span class="stop-icon">⏹</span>
	<span class="stop-text">STOPP — Alles sofort abbrechen</span>
	<span class="stop-hint">(Escape)</span>
</button>

<style>
	.stop-button {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--spacing-md);
		padding: var(--spacing-md) var(--spacing-lg);
		background: linear-gradient(135deg, var(--error), #c0392b);
		color: white;
		font-size: 1rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		border-radius: var(--radius-md);
		border: 2px solid var(--error);
		cursor: pointer;
		transition: all 0.2s ease;
		box-shadow: 0 4px 15px rgba(218, 68, 83, 0.3);
	}

	.stop-button:not(.disabled):hover {
		background: linear-gradient(135deg, #e74c3c, var(--error));
		transform: translateY(-1px);
		box-shadow: 0 6px 20px rgba(218, 68, 83, 0.4);
	}

	.stop-button:not(.disabled):active {
		transform: translateY(0);
		box-shadow: 0 2px 10px rgba(218, 68, 83, 0.3);
	}

	.stop-button.disabled {
		background: var(--bg-tertiary);
		border-color: var(--bg-tertiary);
		color: var(--text-secondary);
		cursor: not-allowed;
		box-shadow: none;
	}

	.stop-icon {
		font-size: 1.25rem;
	}

	.stop-hint {
		font-size: 0.75rem;
		font-weight: 400;
		opacity: 0.8;
	}

	/* Animierter Rand wenn aktiv */
	.stop-button:not(.disabled) {
		animation: border-pulse 1.5s ease-in-out infinite;
	}

	@keyframes border-pulse {
		0%, 100% { border-color: var(--error); }
		50% { border-color: #e88;  }
	}
</style>
