import React from 'react';
import { IonList, IonItem, IonLabel, IonText } from '@ionic/react';

import closeSvg from './close.svg';

interface CloseButtonProps {
  onClick: (e: React.UIEvent) => void;
}

const CloseButton: React.FC<CloseButtonProps> = ({ onClick }) => {
  return (
    <>
      <div
        style={{
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',

          width: '25vw',
          height: '25vw',
          maxWidth: '100px',
          maxHeight: '100px',
        }}
      >
        <div
          style={{
            height: '100%',
            width: '100%',

            backgroundImage: `url("${closeSvg}")`,
            backgroundSize: 'contain',
            backgroundPosition: 'center',
            backgroundRepeat: 'no-repeat',
          }}
          onClick={onClick}
        />
        <IonText>
          <h5>Close</h5>
        </IonText>
      </div>
    </>
  );
};

export default React.memo(CloseButton);