import { Component } from "solid-js";

export const LoadingCircle: Component<{
	status: "loading" | "complete";
	class?: string;
}> = (props) => {
	switch (props.status) {
		case "loading":
			return (
				<svg
					class={props.class}
					width="24"
					height="24"
					viewBox="0 0 24 24"
					xmlns="http://www.w3.org/2000/svg"
				>
					<circle
						cx="12"
						cy="12"
						r="10"
						fill="none"
						stroke-width="3"
						class="stroke-amber-400"
					/>
				</svg>
			);
		case "complete":
			return (
				<svg
					class={props.class}
					width="24"
					height="24"
					viewBox="0 0 24 24"
					xmlns="http://www.w3.org/2000/svg"
				>
					<circle
						cx="12"
						cy="12"
						r="10"
						fill="none"
						stroke-width="3"
						class="stroke-emerald-400"
					/>
				</svg>
			);
	}
};