footer.tsx

import React from 'react';
import styles from './Footer.module.css';
import { TextBold } from '../base';
import {
  firstColData,
  secondColData,
  thirdColData,
  TextItem,
  ImageItem,
} from './FooterItemsData';
type ItemType = 'text' | 'image';
type Item = TextItem | ImageItem;
interface ColumnProps {
  items: Array<Item>;
  type: ItemType;
}
const TextLink: React.FC<TextItem> = ({ link, label, extraLabel }) => (
  <li className={styles.li}>
    <a
      target="_blank"
      rel="noopener noreferrer"
      href={link}
      className={styles.a}
    >
      <TextBold value={label} />
    </a>
  </li>
);

const ImageLink: React.FC<ImageItem> = ({ link, imgAlt, imgSrc }) => (
  <li className={styles.li}>
    <a
      target="_blank"
      rel="noopener noreferrer"
      href={link}
      className={styles.a}
    >
      <img className={styles.img} src={imgSrc} alt={imgAlt} />
    </a>
  </li>
);

const Column: React.FC<ColumnProps> = ({ items, type }) => (
  <ul className={styles.ul}>
    <li className={styles.li}>
      <hr
        className={[
          styles.footerLine,
          type === 'image' ? styles.imageLine : styles.linkLine,
        ].join(' ')}
      />
    </li>
    <div
      className={
        type === 'image' ? styles.imageContainer : styles.textContainer
      }
    >
      {items.map(({ link, label, extraLabel, imgSrc, imgAlt }) =>
        type === 'text' ? (
          <TextLink link={link} label={label} extraLabel={extraLabel} />
        ) : (
          <ImageLink link={link} imgAlt={imgAlt} imgSrc={imgSrc} />
        )
      )}
    </div>
  </ul>
);

const Footer = () => {
  return (
    <div className={styles.container}>
      <div className={styles.wrapper}>
        <div className={styles.row}>
          <img
            className={styles.logo}
            alt="Superdrug Mobile"
            src="https://superdrugmobile.azureedge.net/trial/logo-navy-full.svg"
          />
        </div>
        <div className={styles.row}>
          <Column items={firstColData} type="text" />
        </div>
        <div className={styles.row}>
          <Column items={secondColData} type="text" />
        </div>
        <div className={styles.row}>
          <Column items={thirdColData} type="image" />
        </div>
      </div>
    </div>
  );
};

export default Footer;