import React, { FC, ReactNode } from 'react';
import Layout from '../../components/Layout';
import Content from '../../components/Content';
import Banner, { BannerProps } from '../../components/Banner';
import css from './index.module.css';
import { PackageListItem } from '../../components/PackageList';
import { MilaGridColumn, MilaGridVoid } from '../../index';
import BackToPage, { BackToProps } from '../../components/BackToPage';

export interface SearchPageProps {
  isUk: boolean;
  BannerProps?: BannerProps;
  recommendedPrice?: string;
  children?: ReactNode;
  packages: any;
  queryTitle?: string;
  BackToProps: BackToProps;
  Slice?: ReactNode;
}

const SearchPage: FC<SearchPageProps> = ({
  BannerProps,
  recommendedPrice,
  packages,
  queryTitle,
  BackToProps,
  Slice,
}) => {
  return (
    <Layout>
      <Banner {...BannerProps} />
      {BackToProps && BackToProps.show && <BackToPage {...BackToProps} />}
      <div className={css.package__container}>
        <Content>
          <MilaGridVoid>
            <MilaGridColumn
              columns={['sm-12', 'lg-10', 'xl-8', 'xxl-6']}
              offset={['lg-1', 'xl-2', 'xxl-3']}
            >
              <h2>{queryTitle}</h2>
              {packages && (
                <div className={css.results}>Found {packages.length} items</div>
              )}
            </MilaGridColumn>

            <MilaGridColumn
              columns={['sm-12', 'lg-10', 'xxl-8']}
              offset={['lg-1', 'xxl-2']}
            >
              <div
                className={css.package__items}
                style={{ marginBottom: '50px' }}
              >
                {packages &&
                  packages.map(item => {
                    return (
                      <PackageListItem
                        item={item}
                        isSelected={true}
                        key={item.id}
                      />
                    );
                  })}
              </div>
            </MilaGridColumn>
            {recommendedPrice && (
              <MilaGridColumn
                columns={['sm-12', 'lg-10', 'xl-8', 'xxl-6']}
                offset={['lg-1', 'xl-2', 'xxl-3']}
                className={css.recommendedPrice}
              >
                {'* ' + recommendedPrice}
              </MilaGridColumn>
            )}
          </MilaGridVoid>
        </Content>
      </div>
      {Slice && Slice}
    </Layout>
  );
};

export default SearchPage;