import React, { FC } from 'react';
import css from './index.module.css';
import Content from '../Content';
import { Link, MilaGridColumn, MilaGridVoid } from '../..';

export interface AllServicesListProps {
  offerings: unknown;
}

const AllServicesList: FC<AllServicesListProps> = ({ offerings }) => (
  <Content>
    <MilaGridVoid>
      <MilaGridColumn
        columns={['sm-12', 'lg-10', 'xl-8', 'xxl-6']}
        offset={['lg-1', 'xl-2', 'xxl-3']}
        className={css.list__wrapper}
      >
        {
          <ul className={css.list}>
            {Object.keys(offerings).map((key, y) => (
              <li key={y} className={css.listItem}>
                <h3>{key}</h3>
                <ul className={css.list}>
                  {offerings[key].map(item => (
                    <li key={item.id} className={css.listItem}>
                      <Link
                        to={item.LinkProps.to}
                        variant="normal"
                        className={css.link}
                      >
                        {item.title}
                      </Link>
                    </li>
                  ))}
                </ul>
              </li>
            ))}
          </ul>
        }
      </MilaGridColumn>
    </MilaGridVoid>
  </Content>
);

export default AllServicesList;