import { clsx } from 'clsx';
import { useRef, useEffect } from 'react';
import { useIntl } from 'react-intl';
import messages from '../DateLookup.messages.mjs';
import { jsx } from 'react/jsx-runtime';

const TableLink = ({
  item,
  type,
  title,
  longTitle,
  active,
  disabled,
  today,
  autofocus,
  onClick
}) => {
  const buttonRef = useRef(null);
  const intl = useIntl();
  useEffect(() => {
    if (autofocus) {
      setTimeout(() => {
        buttonRef.current?.focus();
      }, 0);
    }
  }, [autofocus]);
  const onCalendarClick = event => {
    event.preventDefault();
    if (!disabled) {
      onClick(item);
    }
  };
  const calculateAriaLabel = () => {
    if (active) {
      return `${longTitle || title || ''}, ${intl.formatMessage(messages.selected)} ${intl.formatMessage(messages[type])}`;
    }
    return longTitle || title;
  };
  return /*#__PURE__*/jsx("button", {
    ref: buttonRef,
    type: "button",
    className: clsx(`tw-date-lookup-${type}-option np-text-body-default-bold`, {
      active: !!active
    }, {
      today: !!today
    }),
    disabled: disabled,
    tabIndex: autofocus ? 0 : -1,
    "aria-label": calculateAriaLabel(),
    "aria-pressed": active,
    onClick: onCalendarClick,
    children: title || item
  });
};

export { TableLink as default };
//# sourceMappingURL=TableLink.mjs.map
