import React from "react";
import classNames from "classnames";
import styles from "./FooterList.module.scss";

interface Item {
  content: React.ReactNode;
  icon?: React.ReactNode;
}

interface Props {
  title: string;
  list: Item[];
}

const FooterList = ({ title, list }: Props) => {
  return (
    <article className={styles.footerList}>
      <div className="font-bold title text-gradiant mb-6">{title}</div>

      <ul>
        {list.map(({ content, icon }, index) => (
          <li key={index} className={classNames({ "mb-4": index + 1 !== list.length })}>
            <div className="flex rtl:text-right justify-center lg:justify-start">
              {icon && <div className="icon">{icon}</div>}

              <div className="content lg:flex-1">{content}</div>
            </div>
          </li>
        ))}
      </ul>
    </article>
  );
};

export default FooterList;