import React, { useState, useEffect } from 'react'

const Bulk = () => {
  const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);

  useEffect(() => {
    const handleResize = () => setIsMobile(window.innerWidth <= 768);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return (
    <div style={styles.container}>
      <div style={isMobile ? styles.mobileContainer : styles.desktopContainer}>
        <div style={styles.wrapper}>
          <p style={styles.tips}>
            Tips: Need Guidance to create template?{' '}
            <a href="#" style={styles.link}>
              Click here
            </a>
          </p>
          <div style={styles.formGroup}>
            <label style={styles.label}>Application ID</label>
            <select style={styles.select}>
              <option value="">Select Application ID</option>
            </select>
          </div>
          <div style={styles.formGroup}>
            <label style={styles.label}>Template Name</label>
            <select style={styles.select}>
              <option value="">Select Template Name</option>
            </select>
          </div>
          <div style={styles.uploadBox}>
            <p style={styles.uploadText}>Drag and Drop Here</p>
            <p style={styles.orText}>OR</p>
            <button style={styles.browseButton}>Browse</button>
            <p style={styles.uploadInfo}>
              Recommended size: 640 x 360px<br />
              Max size: 5MB<br />
              Supported file types: jpeg, png
            </p>
          </div>
          <div style={styles.download}>
            <a href="#" style={styles.downloadLink}>
              Download Template
            </a>
          </div>
          <button style={styles.demoButton}>Make SMS Demo</button>
        </div>
        <div style={styles.previewBox}>
          <h3 style={styles.previewTitle}>Preview:</h3>
          {/* Preview content */}
        </div>
      </div>
    </div>
  );
}

export default Bulk
  
const styles = {
  container: {
    padding: '1rem',
    width: '100%',
    margin: '0 auto',
    boxSizing: 'border-box',
  },
  // Container styles for desktop and mobile
  desktopContainer: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    gap: '1rem',
  },
  mobileContainer: {
    display: 'flex',
    flexDirection: 'column',
    gap: '1rem',
  },
  wrapper: {
    flex: 1,
    border: '1px solid #ddd',
    borderRadius: '8px',
    padding: '1.5rem',
    boxShadow: '0 2px 5px rgba(0, 0, 0, 0.1)',
    backgroundColor: '#fff',
    borderLeft: '5px solid #0542cc',
  },
  previewBox: {
    flex: 1,
    border: '1px solid #ddd',
    borderRadius: '8px',
    padding: '1.5rem',
    boxShadow: '0 2px 5px rgba(0, 0, 0, 0.1)',
    backgroundColor: '#fff',
    borderLeft: '5px solid #0542cc',
  },
  tips: {
    fontSize: '0.9rem',
    marginBottom: '1rem',
    color: '#555',
  },
  link: {
    color: '#0542cc',
    textDecoration: 'none',
  },
  formGroup: {
    marginBottom: '1rem',
  },
  label: {
    display: 'block',
    marginBottom: '0.5rem',
    fontWeight: 'bold',
    color: '#333',
  },
  select: {
    width: '100%',
    padding: '0.5rem',
    border: '1px solid #ccc',
    borderRadius: '4px',
    fontSize: '1rem',
  },
  uploadBox: {
    textAlign: 'center',
    padding: '2rem',
    border: '2px dashed #ccc',
    borderRadius: '8px',
    backgroundColor: '#f9f9f9',
    marginBottom: '1rem',
  },
  uploadText: {
    fontSize: '1.2rem',
    fontWeight: 'bold',
    color: '#333',
  },
  orText: {
    margin: '0.5rem 0',
    color: '#555',
  },
  browseButton: {
    padding: '0.5rem 1rem',
    backgroundColor: '#0542cc',
    color: '#fff',
    border: 'none',
    borderRadius: '4px',
    cursor: 'pointer',
  },
  uploadInfo: {
    fontSize: '0.8rem',
    color: '#777',
    marginTop: '1rem',
  },
  download: {
    textAlign: 'right',
    marginBottom: '1rem',
  },
  downloadLink: {
    color: '#0542cc',
    textDecoration: 'none',
  },
  demoButton: {
    display: 'block',
    width: '100%',
    padding: '0.8rem',
    backgroundColor: '#0542cc',
    color: '#fff',
    border: 'none',
    borderRadius: '4px',
    cursor: 'pointer',
    fontSize: '1rem',
    fontWeight: 'bold',
  },
  previewTitle: {
    marginBottom: '1rem',
    fontWeight: 'bold',
    color: '#333',
  },
};