import React from 'react'
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
import { Button } from '@mui/material';

const styles = {
    input: {
      backgroundColor: 'transparent',
      border: 'none',
      borderBottom: '1px solid var(--font-color-grey)',
      padding: '12px 0',
      fontSize: '16px',
      lineHeight: '25.6px'
    },
    button: {
      
    },
    div: {
      display: 'flex',
      justifyContent: 'flex-start',
      alignItems: 'stretch'
    }
}

const EmailCollector = () => {
  return (
    <>
      <div style={styles.div}>
          <input type="text" placeholder='Email address' style={styles.input}/>
          <Button variant='sit' sx={styles.button}><ChevronRightIcon sx={{maxHeight: '16px'}}/></Button>
      </div>
    </>
  )
}

export default EmailCollector;