import type { PropsWithChildren, RefAttributes } from "react";

import { cross } from "@simplybusiness/icons";
import type { DOMProps } from "../../types/dom";
import { Button } from "../Button";
import { Icon } from "../Icon";
import { useDrawer } from "./useDrawer";

export type HeaderElementType = HTMLDivElement;

export interface HeaderProps
  extends DOMProps, RefAttributes<HeaderElementType>, PropsWithChildren {}

const Header = ({ ref, children, ...otherProps }: HeaderProps) => {
  const { onClose, closeLabel, headerId } = useDrawer();

  return (
    <header ref={ref} {...otherProps} className="mobius-drawer__header">
      <h2 id={headerId}>{children}</h2>
      <Button
        aria-label="Close"
        variant="basic"
        onPress={onClose}
        className="mobius-drawer__close"
        size="sm"
      >
        <Icon icon={cross} /> {closeLabel}
      </Button>
    </header>
  );
};

Header.displayName = "Header";
export { Header };
