import { clsx } from 'clsx';
import Body from '../body/Body.mjs';
import '../common/theme.mjs';
import '../common/direction.mjs';
import '../common/propsValues/control.mjs';
import '../common/propsValues/breakpoint.mjs';
import '../common/propsValues/size.mjs';
import { Typography } from '../common/propsValues/typography.mjs';
import '../common/propsValues/width.mjs';
import '../common/propsValues/type.mjs';
import '../common/propsValues/dateMode.mjs';
import '../common/propsValues/monthFormat.mjs';
import '../common/propsValues/position.mjs';
import '../common/propsValues/layouts.mjs';
import '../common/propsValues/status.mjs';
import '../common/propsValues/sentiment.mjs';
import '../common/propsValues/profileType.mjs';
import '../common/propsValues/variant.mjs';
import '../common/propsValues/scroll.mjs';
import '../common/propsValues/markdownNodeType.mjs';
import '../common/fileType.mjs';
import '@transferwise/icons';
import 'react';
import 'react-intl';
import '../common/closeButton/CloseButton.messages.mjs';
import { jsxs, jsx } from 'react/jsx-runtime';
import Title from '../title/Title.mjs';

function Tile({
  'aria-label': ariaLabel,
  className,
  description,
  disabled,
  href,
  target,
  media,
  onClick,
  size = 'md',
  title
}) {
  const isSmall = size === 'sm';
  const Element = href ? 'a' : 'button';
  return /*#__PURE__*/jsxs(Element, {
    className: clsx('decision', 'flex-column', 'np-tile', 'text-no-decoration', 'text-xs-center', className, {
      'p-a-3': !isSmall,
      'p-a-2 np-tile--small': isSmall
    }, disabled && 'disabled'),
    href: href,
    target: target,
    "aria-label": ariaLabel,
    onClick: disabled ? undefined : onClick,
    onKeyDown: disabled ? undefined : ({
      key
    }) => {
      if (key === 'Enter' || key === ' ') {
        onClick?.();
      }
    },
    children: [/*#__PURE__*/jsx("div", {
      className: "np-tile__media d-flex justify-content-center",
      children: media
    }), /*#__PURE__*/jsx(Title, {
      type: Typography.TITLE_SUBSECTION,
      className: clsx(isSmall ? 'm-t-1' : 'm-t-2'),
      children: title
    }), description ? /*#__PURE__*/jsx(Body, {
      as: "span",
      type: Typography.BODY_DEFAULT,
      className: "m-t-1",
      children: description
    }) : null]
  });
}

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