<!--
    Component: TechnicalText
    Monospace <code> element for technical values, measurements, identifiers.
-->
<script lang="ts">
import { cn } from '$shared/shadcn/utils/shadcn-utils';
import {
    type LabelSize,
    type LabelVariant,
    labelSizeConfig,
    labelVariantConfig,
} from '$shared/ui/Label/config';
import type { Snippet } from 'svelte';

interface Props {
    variant?: LabelVariant;
    size?: LabelSize;
    children?: Snippet;
    class?: string;
}

let {
    variant = 'muted',
    size = 'sm',
    children,
    class: className,
}: Props = $props();
</script>

<code
    class={cn(
        "font-['Space_Mono'] tracking-tight tabular-nums",
        labelSizeConfig[size],
        labelVariantConfig[variant],
        className,
    )}
>
    {#if children}{@render children()}{/if}
</code>
