import React from "react"

import * as styles from "./index.module.scss"
import OutLink from "@/components/OutLink";
import classNames from "classnames";

interface IProps extends React.HTMLAttributes<HTMLDivElement> {
  children?: React.ReactNode
  image?: string
  imageMobile?: string
  contentStyle?: React.HTMLAttributes<HTMLDivElement>["style"]
  contentClassName?: React.HTMLAttributes<HTMLDivElement>["className"]
  //attrs?: { [key: string]: string | boolean | { [key: string]: string } }
  link?: string
}

const BannerResponsible: React.FC<IProps> = ({
  image,
  imageMobile,
  children,
  link,
  contentStyle,
  contentClassName,
  ...props
}) => {
  const imageDOM = (
    <div>
      <img src={image} className={"is-hidden-mobile"} alt="" />
      <img
        src={imageMobile}
        className={"is-hidden-desktop is-hidden-tablet-only"}
        alt=""
      />
    </div>
  )
  return (
    <div className={styles.container} {...props}>
      {children && <div className={classNames(styles.content, contentClassName)} style={contentStyle}>{children}</div>}
      {link && link.length !== 0 ? (
        <OutLink href={link}>{imageDOM}</OutLink>
      ) : (
        imageDOM
      )}
    </div>
  )

}

export default BannerResponsible