// Adapted from Kibo UI (MIT), with owned React/CSS APIs. See THIRD_PARTY_NOTICES.md.
"use client";
import { useState, type ComponentProps } from "react";
export type BannerProps = ComponentProps<"div"> & {
  visible?: boolean;
  defaultVisible?: boolean;
  onVisibleChange?: (visible: boolean) => void;
  dismissLabel?: string;
};
export function Banner({
  visible,
  defaultVisible = true,
  onVisibleChange,
  dismissLabel = "Dismiss banner",
  children,
  className = "",
  ...props
}: BannerProps) {
  const [internal, setInternal] = useState(defaultVisible);
  if (!(visible ?? internal)) return null;
  return (
    <div className={`ynr-banner ${className}`} {...props}>
      <div>{children}</div>
      <button
        type="button"
        aria-label={dismissLabel}
        onClick={() => {
          if (visible === undefined) setInternal(false);
          onVisibleChange?.(false);
        }}
      >
        ×
      </button>
    </div>
  );
}