import React, { memo } from "react";

import IcPartnersDefault from "../../../../assets/images/ic-tab-partners-default@3x.png";
import CustomImage from "../../../components/CustomImage/CustomImage";
import css from "./Banner.module.less";

export default memo(function Banner({
  brandInfo,
  brandTopImgInfo,
  panelPatnrId,
}) {
  const selectedBrandInfo =
    brandInfo?.find(({ patnrId }) => panelPatnrId === patnrId) || {};

  const { patncLogoPath, patncNm } = selectedBrandInfo;
  const { topImgAlt, topImgPath } = brandTopImgInfo;

  return (
    <div className={css.container}>
      <figure>
        <CustomImage
          src={patncLogoPath}
          alt={patncNm}
          fallbackSrc={IcPartnersDefault}
          ariaLabel={patncNm}
        />
        <figcaption>{patncNm}</figcaption>
      </figure>
      <CustomImage src={topImgPath} alt={topImgAlt} ariaLabel={topImgAlt} />
    </div>
  );
});
