import React from "react";
import { Icon, IconName } from "components/Icon";

import classnames from "classnames";
import "./CardButton.scss";
import { noop } from "utils/noop";

export interface CardButtonProps extends React.HTMLProps<HTMLDivElement> {
  description?: string;
  title?: string;
  icon?: IconName;
}

export const CardButton: React.FC<CardButtonProps> = ({
  className,
  description,
  icon,
  title,
  onClick = noop,
  ...props
}) => {
  const classNames = classnames(className, "card-button");

  const handleClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    onClick(e);
  };

  return (
    <div {...props} onClick={handleClick} className={classNames}>
      {icon && <Icon className="card-button__icon" name={icon} />}

      <div className="card-button__content">
        {title && <div className="card-button__content-title">{title}</div>}
        {description && (
          <div className="card-button__content-description">{description}</div>
        )}
      </div>
    </div>
  );
};
