import React from "react";
import clsx from "clsx";

import "./config-item-styles.scss";
import { OpenNewPage } from "@app/assets/images/icons";

interface ConfigItemProps {
  name: string;
  image?: string;
  slug?: string;
  url?: string;
  biography?: string;
  onClick?: () => void;
  disabled?: boolean;
}

const ConfigItem: React.FC<ConfigItemProps> = ({
  name,
  image,
  slug,
  biography,
  url = "#",
  onClick,
  disabled = false,
}) => {
  const handleClick = () => {
    if (disabled) {
      return;
    }

    if (onClick) {
      onClick();
    }
  };

  return (
    <div
      className={clsx(
        "config-item",
        onClick && "config-item__cursor-effect",
        disabled && "config-item-disabled"
      )}
      onClick={handleClick}
    >
      <div className="config-item__content">
        {image ? (
          <div className="config-item__image-container">
            <img src={image} alt={name} className="config-item__image" />
          </div>
        ) : (
          <div style={{ paddingLeft: "0.75rem" }}></div>
        )}
        <div className="config-item__info">
          <h3 className="config-item__name">{name}</h3>
          {slug && (
            <a
              href={url}
              target="_blank"
              className="config-item__description"
              onClick={(e) => e.stopPropagation()}
            >
              {slug} {OpenNewPage}
            </a>
          )}
          {biography && (
            <div className="config-item__description">{biography}</div>
          )}
        </div>
      </div>
    </div>
  );
};

export default ConfigItem;