<!--
    Component: MockIcon
    Wrapper component for Lucide icons to properly handle className in Storybook.

    Lucide Svelte icons from @lucide/svelte/icons/* don't properly handle
    the className prop directly. This wrapper ensures the class is applied
    correctly via the HTML element's class attribute.
-->
<script lang="ts">
import { cn } from '$shared/shadcn/utils/shadcn-utils';
import type {
    Component,
    Snippet,
} from 'svelte';

interface Props {
    /**
     * The Lucide icon component
     */
    icon: Component;
    /**
     * CSS classes to apply to the icon
     */
    class?: string;
    /**
     * Additional icon-specific attributes
     */
    attrs?: Record<string, unknown>;
}

let { icon: Icon, class: className, attrs = {} }: Props = $props();
</script>

{#if Icon}
    {@const __iconClass__ = cn('size-4', className)}
    <!-- Render icon component dynamically with class prop -->
    <Icon
        class={__iconClass__}
        {...attrs}
    />
{/if}
