<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}
	title="Stopp (Esc) — beendet aktive Agenten, Session bleibt erhalten"
	aria-label="Aktive Agents stoppen"
>
	<span class="stop-icon">⏹</span>
</button>

<style>
	.stop-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 24px;
		height: 24px;
		padding: 0;
		background: transparent;
		color: #e94560;
		font-size: 0.95rem;
		border: 1px solid transparent;
		border-radius: var(--radius-sm);
		cursor: pointer;
		transition: background 0.15s ease, border-color 0.15s ease;
	}

	.stop-button:not(.disabled):hover {
		background: rgba(233, 69, 96, 0.12);
		border-color: rgba(233, 69, 96, 0.35);
	}

	.stop-button:not(.disabled):active {
		background: rgba(233, 69, 96, 0.22);
	}

	.stop-button.disabled {
		color: var(--text-secondary);
		opacity: 0.4;
		cursor: not-allowed;
	}

	.stop-icon {
		line-height: 1;
	}
</style>
