import { clsx } from 'clsx';

import Body from '../body';
import { Size, Typography } from '../common';
import Title from '../title';

export interface TileProps {
  /** Classes to apply to the Tile container */
  /** A label for the accordion item, used for accessibility purposes. */
  'aria-label'?: string;
  className?: string;
  description?: React.ReactNode;
  disabled?: boolean;
  href?: string;
  target?: React.HTMLAttributeAnchorTarget;
  /** Accepts only Avatar and images */
  media: React.ReactNode;
  /** Function called onClick or onKeyDown */
  onClick?: (event?: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
  /** The size applied to Tile */
  size?: `${Size.SMALL | Size.MEDIUM}`;
  title: React.ReactNode;
}

export default function Tile({
  'aria-label': ariaLabel,
  className,
  description,
  disabled,
  href,
  target,
  media,
  onClick,
  size = 'md',
  title,
}: TileProps) {
  const isSmall = size === 'sm';
  const Element = href ? 'a' : 'button';

  return (
    <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?.();
              }
            }
      }
    >
      <div className="np-tile__media d-flex justify-content-center">{media}</div>
      <Title type={Typography.TITLE_SUBSECTION} className={clsx(isSmall ? 'm-t-1' : 'm-t-2')}>
        {title}
      </Title>
      {description ? (
        <Body as="span" type={Typography.BODY_DEFAULT} className="m-t-1">
          {description}
        </Body>
      ) : null}
    </Element>
  );
}
