// Type definitions for agate/Header

import * as React from "react";
import { SlottableProps as ui_Slottable_SlottableProps } from "@enact/ui/Slottable";
import { SkinnableProps as agate_Skinnable_SkinnableProps } from "@enact/agate/Skinnable";

type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;

export interface HeaderBaseProps {
  /**
 * Title of the header.
 * 
 * This is a  `slot`  , so it can be used as a tag-name inside
this component.
 * 
 * Example:
 * ```
 <Header>
 	<titleAbove>Introducing...</titleAbove>
 	<title>Example Header Title</title>
 	<subtitle>The Adventure Continues</subtitle>
 </Header>
```
 */
  title: string;
  /**
   * Sets the hint string read.
   */
  "aria-label"?: string;
  /**
 * Customizes the component by mapping the supplied collection of CSS class names to the
corresponding internal elements and states of this component.
 * 
 * The following classes are supported:
 * *  `header`  - The root class name
 * *  `titleContainer`  - The background title container
 * *  `subtitle`  - Applied to  `subtitle`
 * *  `title`  - Applied to  `title`
 * *  `titleAbove`  - Applied to  `titleAbove`
 */
  css?: object;
  /**
   * Hides the horizontal-rule (line) under the component
   */
  hideLine?: boolean;
  /**
 * Text displayed below the title.
 * 
 * This is a  `slot`  , so it can be used as a tag-name inside
this component.
 */
  subtitle?: string;
  /**
 * Text displayed above the title.
 * 
 * This is a  `slot`  , so it can be used as a tag-name inside
this component.
 */
  titleAbove?: string;
}
/**
 * A header component for a Panel with a  `title` ,  `titleAbove` ,  `subtitle`
 */

export class HeaderBase extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, HeaderBaseProps>
> {}

export interface HeaderDecoratorProps
  extends Merge<ui_Slottable_SlottableProps, agate_Skinnable_SkinnableProps> {}
export function HeaderDecorator<P>(
  Component: React.ComponentType<P> | string
): React.ComponentType<P & HeaderDecoratorProps>;

export interface HeaderProps
  extends Merge<HeaderBaseProps, HeaderDecoratorProps> {}
/**
 * An Agate-style header component
 */

export class Header extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, HeaderProps>
> {}

export default Header;
