<script lang="ts">
	import { Selector } from '../Scraper.svelte';

	let { selector }: { selector: Selector<string> } = $props();
</script>

<button
	type="button"
	class="ml-1 flex rounded-xs border-slate-700 bg-slate-900 hover:brightness-110"
	onclick={selector.toggle}
>
	<div class="flex self-center pl-1">
		{#if selector.keep}
			<span class="icon-base icon-[material-symbols--check] text-green-400"></span>
		{:else}
			<span class="icon-base icon-[material-symbols--close] text-red-400"></span>
		{/if}
	</div>
	<p class:opacity-50={!selector.keep} class="p-1 text-left">
		{selector}
	</p>
</button>