---
import type { HTMLAttributes } from 'astro/types';

type AnchorProps = HTMLAttributes<'a'> & { type?: never };
type ButtonProps = HTMLAttributes<'button'> & { href?: never };

type Props = ButtonProps | AnchorProps;

const { href, class: className, ...rest } = Astro.props;
const buttonClasses = 'inline-flex items-center justify-center p-2 text-main bg-main border border-main rounded-full transition hover:bg-muted';
---

{
    href ? (
        <a href={href} class:list={[buttonClasses, className]} {...rest}>
            <slot />
        </a>
    ) : (
        <button class:list={[buttonClasses, 'cursor-pointer', className]} {...rest}>
            <slot />
        </button>
    )
}
