<script lang="ts">
  import Stack from "../stack/Stack.svelte";
  import { useConditionContext } from "../../stores/condition-context.svelte";
  import type { LoaderProgressComponentProps } from "../../types/components/loader-progress-components";
  import { resolveOverrideProperties } from "../../utils/style-utils";

  const props: LoaderProgressComponentProps = $props();

  const buildConditionContext = useConditionContext({ state: true });
  const actualProps = $derived({
    ...props,
    ...resolveOverrideProperties(buildConditionContext(), props.overrides),
  });

  const isVisible = $derived(actualProps.visible !== false);
</script>

{#if isVisible}
  <Stack {...actualProps.stack} testId="loader-progress-component" />
{/if}
