<script lang="ts">
import { cn } from '$shared/shadcn/utils/shadcn-utils';

interface Props {
    text?: string;
    align?: 'left' | 'right' | 'center';
    size?: 'sm' | 'md' | 'lg';
    onlyText?: boolean;
    class?: string;
}
const {
    text,
    align = 'left',
    size = 'md',
    onlyText = false,
    class: className,
}: Props = $props();
</script>

<div
    class={cn(
        'grid grid-rows-1 gap-2 items-center w-auto',
        align === 'left' && 'grid-cols-[max-content_1fr]',
        align === 'center' && 'grid-cols-[1fr_max-content_1fr]',
        align === 'right' && 'grig-cols-[1fr_max-content]',
        className,
    )}
>
    {#if align !== 'left'}
        <div class={cn('h-px w-full bg-gray-400/50', onlyText && 'bg-transparent')}></div>
    {/if}
    <div
        class={cn(
            'text-gray-400 uppercase',
            size === 'sm' && 'text-[0.5rem]',
            size === 'md' && 'text-[0.625rem]',
            size === 'lg' && 'text-[0.75rem]',
        )}
    >
        {text}
    </div>
    {#if align !== 'right'}
        <div class={cn('h-px w-full bg-gray-400/50', onlyText && 'bg-transparent')}></div>
    {/if}
</div>
