interface SplashScreenProps {
  logo?: string
}

export const SplashScreen = ({ logo }: SplashScreenProps) => (
  <div
    style={{
      height: '100vh',
      width: '100vw',
      boxSizing: 'border-box',
      background: '#fddd81',
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'center',
    }}
  >
    <div style={{ width: '18rem' }}>
      <img src={logo} alt="heffiq" style={{ objectFit: 'contain', width: '100%', height: '100%' }} />
    </div>
    <div style={{ marginTop: '2rem' }}>
      <div className="lds-dual-ring" />
    </div>

    <style>{`
        .lds-dual-ring {
          display: inline-block;
          width: 80px;
          height: 80px;
        }
        .lds-dual-ring:after {
          content: ' ';
          display: block;
          width: 64px;
          height: 64px;
          margin: 8px;
          border-radius: 50%;
          border: 6px solid rgb(3, 3, 3);
          border-color: rgb(13, 13, 13) transparent #fff transparent;
          animation: lds-dual-ring 1.2s linear infinite;
        }
        @keyframes lds-dual-ring {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
        }
      `}</style>
  </div>
)