import "./style.pcss";
import type {
  ReactElement,
  FC,
} from "react";
import type { ILogo } from "./config/types";
import type { IComponentBaseProps } from "../../types/components";
import { useCN } from "../../utils/react/useCN";

/**
 * Логотип
 * @returns {ReactElement}
 */
const Logo: FC<ILogo & IComponentBaseProps> = ({
  baseClass = "logo",
  extraClasses = {},
  extraAttrs = {},
  utilClasses = [],
  href = "https://d-element.ru/",
  rel = "noopener noreferrer",
  title = "Цифровой Элемент",
  ariaLabel = "Цифровой Элемент",
  target = "_blank",
  src = "",
  srcSet = undefined,
  height = 32,
  width = 229,
  fetchPriority = "auto",
  loading = "lazy",
  decoding = "async",
  alt = "Цифровой Элемент",
}): ReactElement => {
  const { getCN } = useCN(baseClass);

  return (
    <div
      className={getCN("", extraClasses, utilClasses)}
      {...extraAttrs}
    >
      <a
        className={getCN("link")}
        href={href}
        rel={rel}
        target={target}
        aria-label={ariaLabel}
        title={title}
      >
        <img
          className={getCN("img")}
          src={src}
          srcSet={srcSet ? `${srcSet} 2x` : undefined}
          height={height}
          width={width}
          loading={loading}
          fetchPriority={fetchPriority}
          decoding={decoding}
          alt={alt}
        />
      </a>
    </div>

  );
};

export type {
  ILogo,
};

export {
  Logo,
};