import { useState } from '@wordpress/element';
import { Icon } from '@wordpress/icons';
import classNames from 'classnames';
import { bannerButtonVariables, buttonHoverClasses, colorsOf } from '../colors';
import { ctaActionFor, runCtaAction } from '../cta-action';
import { iconFor } from '../icons';
import { externalLinkProps } from '../notification-link';
export const Pill = ({ notification, href, external, onClick }) => {
const ctaLabel = notification['cta-label'];
const icon = iconFor(notification.icon);
const colors = colorsOf(notification);
const [running, setRunning] = useState(false);
const action = ctaActionFor(notification);
// Core's admin bar is taller below the md breakpoint; the pill matches it.
const className = classNames(
'inline-flex h-7.5 shrink-0 items-center gap-1 rounded-sm bg-banner-main px-2.5 text-sm leading-none text-banner-text no-underline md:h-6 md:text-[13px]',
running ? 'cursor-not-allowed' : 'cursor-pointer',
!running && buttonHoverClasses(colors),
);
// The pill has no room for a spinner, so the reload is the only feedback.
const runAction = () => {
setRunning(true);
runCtaAction(action, onClick);
};
const shared = {
// Without this the pill has no accessible name where CSS hides the label.
'aria-label': ctaLabel,
className,
style: bannerButtonVariables(colors),
'data-test': 'notification-pill',
};
const label = (
<>
{icon && <Icon icon={icon} size={16} className="fill-current" />}
<span className="ext-notification-pill-label">{ctaLabel}</span>
</>
);
if (action) {
return (
<button
type="button"
onClick={runAction}
disabled={running}
aria-busy={running}
{...shared}
>
{label}
</button>
);
}
return (
<a
href={href}
{...externalLinkProps(external)}
onClick={onClick}
{...shared}
>
{label}
</a>
);
};