// REQ0088/favorite-event-empty

import React, { CSSProperties, useState } from 'react';
import { connect } from '../../data/connect';
import { IonIcon, IonLoading } from '@ionic/react';
import { GridLoader } from 'react-spinners';
import { alertCircleOutline, alertOutline } from 'ionicons/icons';
// import AlertSvg from './alert-svgrepo-com.svg';

interface OwnProps {}

interface StateProps {}

interface DispatchProps {}

const override: CSSProperties = {
  display: 'block',
  margin: '0 auto',
  borderColor: 'red',
};

function NoSavedEvents() {
  let [loading, setLoading] = useState(true);
  let [color, setColor] = useState('#333333');

  return (
    <>
      <div
        style={{
          height: '80%',
          width: '100%',
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
        }}
      >
        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            gap: '3rem',
          }}
        >
          {/* TODO: alert icon modified from svg to IonIcon for build, need fallback */}
          <IonIcon icon={alertOutline} />

          <div
            style={{
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              gap: '1rem',
            }}
          >
            <div>You have not saved yet</div>
            <div style={{ lineHeight: '2rem' }}>
              To add your favourites, <br />
              simply take a look here
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

export default connect<OwnProps, StateProps, DispatchProps>({
  mapStateToProps: (state) => ({}),
  component: React.memo(NoSavedEvents),
});
