import cx from "classnames";
import type { ReactNode } from "react";
import React from "react";
import { Icon } from "../Icon";
import type { IconProps } from "../Icon/Icon";

export type TileHAlign = "center";
export type TileVAlign = "center" | "end" | "space-between";
export type TileVariant = "compact" | "action";

export interface TileProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Horizontal alignment of the tile content. */
  hAlign?: TileHAlign;
  /** Vertical alignment of the tile content. */
  vAlign?: TileVAlign;
  /** Tile variant. */
  variant?: TileVariant;
  children?: ReactNode;
  className?: string;
}

const CLASS_ROOT = "tile";

const Tile: React.FC<TileProps> = ({
  className,
  children,
  variant,
  vAlign,
  hAlign,
  ...other
}) => {
  const isCompact = variant === "compact";
  const isAction = variant === "action";

  const classesWrapper = cx(
    CLASS_ROOT,
    {
      [`${CLASS_ROOT}--compact`]: isCompact,
      [`${CLASS_ROOT}--action`]: isAction,
    },
    className,
  );

  const classesBody = cx(
    `${CLASS_ROOT}__body`,
    !isAction && vAlign && `justify-content-${vAlign}`,
    !isAction && hAlign && `align-items-${hAlign}`,
  );

  const iconProps = isAction
    ? ({
        name: "chevron-right",
        size: "medium",
        color: "orange",
      } as IconProps)
    : null;

  return (
    <div className={classesWrapper} {...other}>
      <div className={classesBody}>
        {children}
        {iconProps && <Icon {...iconProps} />}
      </div>
    </div>
  );
};

Tile.displayName = "Tile";

export { Tile };