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

	export let selector: Selector<string>;
</script>

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