/**
 * Interface for the settings object that can be passed to the link-element
 */
interface LinkElementSettings {
  /** Button background color */
  backgroundColor?: string;
  /** Button border color */
  borderColor?: string;
  /** Background color on hover */
  hoverBackgroundColor?: string;
  /** Border color on hover */
  hoverBorderColor?: string;
  /** Background color when active */
  activeBackgroundColor?: string;
  /** Border color when active */
  activeBorderColor?: string;
  /** Text color */
  textColor?: string;
  /** Font size */
  fontSize?: string;
  /** Border radius */
  borderRadius?: string;
  /** Button padding */
  padding?: string;
  /** Border width */
  borderWidth?: string;
  /** Box shadow */
  boxShadow?: string;
}

/**
 * Custom element interface for link-element
 */
interface LinkElement extends HTMLElement {
  /** The URL the link should navigate to */
  url: string;
  /** The text to display on the button */
  label: string;
  /** JSON string containing styling options */
  settings: string;
}

declare global {
  interface HTMLElementTagNameMap {
    'link-element': LinkElement;
  }
}

export { LinkElement, LinkElementSettings };