'use strict';

var clsx = require('clsx');
var Body = require('../body/Body.js');
var Title = require('../title/Title.js');
var jsxRuntime = require('react/jsx-runtime');
var typography = require('../common/propsValues/typography.js');

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__*/jsxRuntime.jsxs(Element, {
    className: clsx.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__*/jsxRuntime.jsx("div", {
      className: "np-tile__media d-flex justify-content-center",
      children: media
    }), /*#__PURE__*/jsxRuntime.jsx(Title, {
      type: typography.Typography.TITLE_SUBSECTION,
      className: clsx.clsx(isSmall ? 'm-t-1' : 'm-t-2'),
      children: title
    }), description ? /*#__PURE__*/jsxRuntime.jsx(Body, {
      as: "span",
      type: typography.Typography.BODY_DEFAULT,
      className: "m-t-1",
      children: description
    }) : null]
  });
}

module.exports = Tile;
//# sourceMappingURL=Tile.js.map
