---
import { clx } from '../../utils/classes';
type Props = {
  className?: string;
  type?: 'primary' | 'ghost';
}

const { className, type, ...props } = Astro.props;
const buttonType = type ?? 'primary'
---

<button class={clx({
  [buttonType]: true,
}, className)} {...props}>
  <slot />
</button>

<style lang="scss">
button {
  border: none;
  font-size: 1rem;
  background-color: unset;
  color: var(--foreground-color);
  border-radius: 0.5rem 0;
  padding: 0.5rem 0.75rem;
  
  &.primary {
    color: var(--button-fg-color);
    background-color: var(--button-background-color);
    border: 2px solid #8da9c4;

    &:focus-within, &:hover {
      background-color: var(--button-hover-color);
    }

    &:active {
      background-color: var(--button-active-color);
    }
  }

  &.ghost {
    &:hover, &:focus-within {
      background-color: rgba(255, 255, 255, 0.1);
    }

    &:active {
      background-color: rgba(255, 255, 255, 0.2);
    }
  }
}

button:hover {
  cursor: pointer;
}
</style>