---
import { Icon } from '@prosefly/astro-components';
import { resolveIconName } from '../../lib/icons';

type ButtonVariant = 'text' | 'soft' | 'outline' | 'solid' | 'ghost';
type ButtonColor = 'neutral' | 'accent';

interface Props {
  href?: string;
  external?: boolean;
  variant?: ButtonVariant;
  color?: ButtonColor;
  trailingIcon?: string;
  block?: boolean;
  class?: string;
  type?: 'button' | 'submit' | 'reset';
  [key: string]: unknown;
}

const {
  href,
  external = false,
  variant = 'soft',
  color = 'neutral',
  trailingIcon,
  block = false,
  class: className,
  type = 'button',
  ...attrs
} = Astro.props;
const trailingIconName = trailingIcon ? resolveIconName(trailingIcon) : undefined;
const baseClasses = [
  'lotus-focus-ring items-center gap-2 rounded-(--lotus-radius-md) text-sm font-medium transition-colors',
  block ? 'flex w-full justify-start' : 'inline-flex justify-center',
  variant === 'text' ? '' : 'h-9 px-3',
];
const variantClasses = {
  text:
    color === 'accent'
      ? 'text-(--lotus-accent) hover:text-(--lotus-accent)'
      : 'text-(--lotus-text-muted) hover:text-(--lotus-text-strong)',
  solid:
    color === 'accent'
      ? 'bg-(--lotus-accent) text-(--lotus-accent-contrast) hover:opacity-90'
      : 'bg-(--lotus-text-strong) text-(--lotus-background) hover:opacity-90',
  outline:
    color === 'accent'
      ? 'lotus-border-muted border text-(--lotus-accent) hover:border-(--lotus-accent) hover:bg-(--lotus-accent-soft)'
      : 'lotus-border-muted border text-(--lotus-text-strong) hover:bg-(--lotus-surface)',
  soft:
    color === 'accent'
      ? 'bg-(--lotus-accent-soft) text-(--lotus-accent) hover:opacity-90'
      : 'bg-(--lotus-surface) text-(--lotus-text-strong) hover:bg-(--lotus-accent-soft)',
  ghost:
    color === 'accent'
      ? 'text-(--lotus-accent) hover:bg-(--lotus-accent-soft)'
      : 'text-(--lotus-text-strong) hover:bg-(--lotus-surface)',
}[variant];
---

{
  href ? (
    <a
      class:list={[baseClasses, variantClasses, className]}
      href={href}
      rel={external ? 'noreferrer' : undefined}
      target={external ? '_blank' : undefined}
      {...attrs}
    >
      <slot />
      {trailingIconName && <Icon aria-hidden="true" class="h-4 w-4" name={trailingIconName} />}
    </a>
  ) : (
    <button class:list={[baseClasses, variantClasses, className]} type={type} {...attrs}>
      <slot />
      {trailingIconName && <Icon aria-hidden="true" class="h-4 w-4" name={trailingIconName} />}
    </button>
  )
}