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

	export let title: string;
	export let selectors: Selector<string>[];

	function invert() {
		for (let selector of selectors) {
			selector.keep = !selector.keep;
		}
		selectors = selectors;
	}
</script>

{#if selectors.length > 0}
	<div class="group col-span-6 flex flex-col gap-1">
		<div class="flex gap-2">
			<h2>{title}</h2>
			<button
				type="button"
				class="flex items-end opacity-75 brightness-75 transition-opacity hover:opacity-100 hover:brightness-110 focus-visible:opacity-100"
				on:click={invert}
				title="Invert selection"
			>
				<span class="icon-xs icon-[material-symbols--compare-arrows]"></span>
			</button>
		</div>
		<div class="flex flex-wrap gap-y-1">
			{#each selectors as selector}
				<SelectorButton {selector} />
			{/each}
		</div>
	</div>
{/if}