<script module lang="ts">
	import type { Component } from "svelte";
	import type { SvelteHTMLElements } from "svelte/elements";
	import { tv, type VariantProps } from "tailwind-variants";
	import Check from "$icon/check";
	import CircleDashed from "$icon/circle-dashed";
	import CircleSlash from "$icon/circle-slash";
	import ClockAlert from "$icon/clock-alert";
	import RefreshCw from "$icon/refresh-cw";
	import X from "$icon/x";
	import type { PipelineStatus } from "$lib/components/repo/types";

	/** same icon per status as the appview's workflowSymbol fragment */
	export const STATUS_ICONS: Record<PipelineStatus, Component<SvelteHTMLElements["svg"]>> = {
		pending: CircleDashed,
		running: RefreshCw,
		success: Check,
		failed: X,
		timeout: ClockAlert,
		cancelled: CircleSlash
	};

	// leave `status` off to let the icon inherit its colour, e.g. inside a Tag
	export const pipelineStatusIcon = tv({
		base: "size-3 shrink-0",
		variants: {
			status: {
				pending: "text-foreground-muted",
				running: "text-foreground-warning",
				success: "text-foreground-success",
				failed: "text-foreground-danger",
				timeout: "text-foreground-warning",
				cancelled: "text-foreground-muted"
			}
		}
	});

	export type PipelineStatusIconVariants = VariantProps<typeof pipelineStatusIcon>;
</script>

<script lang="ts">
	interface Props {
		status: PipelineStatus;
		/** colour the icon itself; off inside a Tag */
		colored?: boolean;
		class?: string;
	}

	let { status, colored = false, class: className }: Props = $props();

	const Icon = $derived(STATUS_ICONS[status]);
	const classes = $derived(
		pipelineStatusIcon({ status: colored ? status : undefined, class: className })
	);
</script>

<Icon class={classes} aria-hidden="true" />
