import { useMemo } from "react";
import "./SmallBanner.scss";

export default function SmallBanner(props: {
  image: string;
  title: string[];
  linkText: string;
  url?: string;
}): React.ReactElement {
  const title = useMemo(() => {
    let title: React.ReactElement[] = [];

    for (const text of props.title) {
      title.push(<>{text}</>);
      title.push(<br />);
    }
    title.pop();

    return title;
  }, props.title);

  return (
    <a className="small-banner" href={props.url ?? "#"}>
      <img className="image" src={props.image} />
      <div className="widget">
        <p className="sub-title">{...title}</p>
        <p className="link">{props.linkText}</p>
      </div>
    </a>
  );
}
