<!--
    Component: Section
    Provides a container for a page widget with snippets for a title
-->
<script lang="ts">
import { cn } from '$shared/shadcn/utils/shadcn-utils';
import type { Snippet } from 'svelte';
import { cubicOut } from 'svelte/easing';
import type { HTMLAttributes } from 'svelte/elements';
import {
    type FlyParams,
    fly,
} from 'svelte/transition';

interface Props extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
    /**
     * Additional CSS classes to apply to the section container.
     */
    class?: string;
    /**
     * Snippet for a title itself
     */
    title?: Snippet<[{ className?: string }]>;
    /**
     * Snippet for a title icon
     */
    icon?: Snippet<[{ className?: string }]>;
    /**
     * Index of the section
     */
    index?: number;
    /**
     * Snippet for the section content
     */
    children?: Snippet;
}

const { class: className, title, icon, index, children }: Props = $props();

const flyParams: FlyParams = { y: 0, x: -50, duration: 300, easing: cubicOut, opacity: 0.2 };
</script>

<section
    class={cn(
        'flex flex-col',
        className,
    )}
    in:fly={flyParams}
    out:fly={flyParams}
>
    <div class="flex flex-col gap-2">
        <div class="flex items-center gap-3 opacity-60">
            {#if icon}
                {@render icon({ className: 'size-4 stroke-gray-900 stroke-1' })}
                <div class="w-px h-3 bg-gray-400/50"></div>
            {/if}
            {#if typeof index === 'number'}
                <span class="font-mono text-[10px] uppercase tracking-[0.2em] text-gray-600">
                    Component_{String(index).padStart(3, '0')}
                </span>
            {/if}
        </div>

        {#if title}
            {@render title({ className: 'text-5xl md:text-6xl font-semibold tracking-tighter text-gray-900 leading-[0.9]' })}
        {/if}
    </div>

    {@render children?.()}
</section>
