<script lang="ts">
  import type { Snippet } from 'svelte';
  import type { HTMLButtonAttributes } from 'svelte/elements';

  interface Props extends HTMLButtonAttributes {
    color?: string | null;
    rounded?: 'full' | 'md' | 'lg';
    size?: 'sm' | 'md' | 'lg';
    children: Snippet;
  }

  let {
    color = null,
    rounded = 'full',
    size = 'md',
    class: className = '',
    children,
    ...restProps
  }: Props = $props();

  const sizeClasses = {
    sm: 'w-8 h-8',
    md: 'w-10 h-10',
    lg: 'w-12 h-12'
  };

  const roundedClasses = {
    full: 'rounded-full',
    md: 'rounded-md',
    lg: 'rounded-lg'
  };

  const baseClasses =
    'flex items-center justify-center border border-input transition-colors backdrop-blur';
  const sizeClass = sizeClasses[size];
  const roundedClass = roundedClasses[rounded];
</script>

<button
  type="button"
  class="{baseClasses} {sizeClass} {roundedClass} {className} backdrop-blur-sm"
  class:hover:bg-accent={!color}
  style={color ? `--hover-bg: ${color}20;` : ''}
  {...restProps}
>
  {@render children()}
</button>

<style>
  button[style*='--hover-bg']:hover {
    background-color: var(--hover-bg);
  }
</style>
