---
interface Props {
    id?: string;
    name?: string;
    isIcon?: boolean;
    iconName?: string;
    width?: string;
    height?: string;
    regular?: boolean;
    light?: boolean
    card?: boolean;
    iconSize?: number,
    class?: string
    disabled?: boolean
}
const props = Astro.props;
const {
    id,
    name,
    isIcon = false,
    iconName,
    width,
    height = '44px',
    regular,
    light,
    iconSize = 24,
    card,
    disabled = false,
} = Astro.props;
const className = Astro.props.class;
import { Icon } from 'astro-icon/components';
---

<button id={id}
        disabled={disabled}
        aria-label={name}
    class:list={[
    className,
    `
    transition
    h-[var(--height)]
    `,
    {
        'w-[var(--width)]': width,
        'w-[var(--height)]': isIcon,

        'bg-none': light,
        'hover:bg-[var(--btn-plain-bg-hover)]': light,
        'active:bg-[var(--btn-plain-bg-active)]': light,
        'text-black/75': light,
        'hover:text-[var(--primary)]': light,

        'dark:text-white/75': light || regular,
        'dark:hover:text-[var(--primary)]': light,

        'bg-[var(--btn-regular-bg)]': regular,
        'hover:bg-[var(--btn-regular-bg-hover)]': regular,
        'active:bg-[var(--btn-regular-bg-active)]': regular,
        'text-[var(--btn-content)]': regular,


        'bg-[var(--card-bg)]': card,
        'enabled:hover:bg-[var(--btn-card-bg-hover)]': card,
        'enabled:active:bg-[var(--btn-card-bg-active)]': card,
        'disabled:text-black/10': card,
        'disabled:dark:text-white/10': card,
    }
]}
>
    {props.isIcon && <Icon class="mx-auto" name={props.iconName} size={iconSize}></Icon> }
    <slot />
</button>

<style define:vars={{ height, width, iconSize }}>

</style>