<!--
    Component: IconButton
    Shadcn button size="icon" variant="ghost" with custom styling and icon snippet
-->
<script lang="ts">
import { Button } from '$shared/shadcn/ui/button';
import { cn } from '$shared/shadcn/utils/shadcn-utils';
import type {
    ComponentProps,
    Snippet,
} from 'svelte';

interface Props extends ComponentProps<typeof Button> {
    /**
     * Direction of the rotation effect on click
     * @default clockwise
     */
    rotation?: 'clockwise' | 'counterclockwise';
    /**
     * Icon
     */
    icon: Snippet<[{ className: string }]>;
}

let { rotation = 'clockwise', icon, ...rest }: Props = $props();
</script>

<Button
    variant="ghost"
    class="
        group relative border-none size-9
        bg-white/20 hover:bg-white/60
        backdrop-blur-3xl
        transition-all duration-200 ease-out
        will-change-transform
        hover:-translate-y-0.5
        active:translate-y-0 active:scale-95 active:shadow-none
        cursor-pointer
        disabled:opacity-50 disabled:pointer-events-none
    "
    size="icon"
    {...rest}
>
    {@render icon({
    className: cn(
        'size-4 transition-all duration-200 stroke-[1.5] stroke-gray-500 group-hover:stroke-gray-900 group-hover:scale-110 group-hover:stroke-3 group-active:scale-90 group-disabled:stroke-transparent',
        rotation === 'clockwise' ? 'group-active:rotate-6' : 'group-active:-rotate-6',
    ),
})}
</Button>
