import { height } from '@fortawesome/free-solid-svg-icons/fa0';
import React from 'react';

const Inbox = () => {
  return (
    <div style={styles.overlay}>
      <div style={styles.modal}>
        <div style={styles.header}>
          <span style={styles.icon}>💬</span>
          <h2 style={styles.title}>Activate Inbox</h2>
        </div>
        <p style={styles.description}>
          Inbox allows seamless two-way communication with your end-users. By activating this feature, you agree
          to a processing fee for each message sent and received.
        </p>
        <div style={styles.terms}>
          <input type="checkbox" id="agree" style={styles.checkbox} />
          <label htmlFor="agree" style={styles.label}>
            I agree with <a href="#" style={styles.link}>WhatsApp's Terms of Service</a>
          </label>
        </div>
        <div style={styles.actions}>
          <button style={styles.cancelButton}>Cancel</button>
          <button style={styles.activateButton}>Activate Now</button>
        </div>
      </div>
    </div>
  );
};

const styles = {
  overlay: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    height: '100vh',
    backgroundColor: 'rgba(0, 0, 0, 0.1)',
  },
  modal: {
    width: '43%',
    height: '33%',
    padding: '20px',
    backgroundColor: '#fff',
    borderRadius: '8px',
    boxShadow: '0 4px 10px rgba(0, 0, 0, 0.2)',
    textAlign: 'center',
    borderLeft: '5px solid #0542cc',
  },
  header: {
    marginBottom: '16px',
  },
  icon: {
    fontSize: '2rem',
    color: '#0542cc',
  },
  title: {
    margin: '8px 0 0',
    fontSize: '1.5rem',
    fontWeight: 'bold',
    color: '#333',
  },
  description: {
    fontSize: '1rem',
    color: '#555',
    marginBottom: '20px',
  },
  terms: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: '20px',
  },
  checkbox: {
    marginRight: '10px',
  },
  label: {
    fontSize: '0.9rem',
    color: '#555',
  },
  link: {
    color: '#0542cc',
    textDecoration: 'none',
  },
  actions: {
    display: 'flex',
    justifyContent: 'space-between',
    marginTop: '10px',
  },
  cancelButton: {
    padding: '10px 20px',
    backgroundColor: '#fff',
    border: '1px solid #ccc',
    borderRadius: '4px',
    color: '#555',
    cursor: 'pointer',
  },
  activateButton: {
    padding: '10px 20px',
    backgroundColor: '#0542cc',
    color: '#fff',
    border: 'none',
    borderRadius: '4px',
    cursor: 'pointer',
  },
};

export default Inbox;
