import React from "react";

const Message = () => {

  return (
    <div style={styles.container}>
      <div style={styles.row}>
        {/* Kolom Pertama */}
        <div style={styles.column}>
          {/* Dropdown untuk Application Name */}
          <div style={styles.formGroup}>
            <select id="appID" style={styles.select}>
              <option value="">Application ID</option>
              <option value="app1">App 1</option>
              <option value="app2">App 2</option>
            </select>
          </div>

          {/* Dropdown untuk Template Name */}
          <div style={styles.formGroup}>
            <select id="templateName" style={styles.select}>
              <option value="">Template Name</option>
              <option value="template1">Template 1</option>
              <option value="template2">Template 2</option>
            </select>
          </div>

          {/* Input untuk Template Review */}
          <div style={styles.formGroup}>
            <input
              type="text"
              id="templateReview"
              placeholder="Template Review"
              style={styles.input}
            />
          </div>
        </div>
      </div>

      {/* Tombol Save */}
      <button style={styles.button}>Save</button>
    </div>
  );
};

export default Message;

const styles = {
  container: {
    padding: "20px",
    fontFamily: "Arial, sans-serif",
  },
  row: {
    display: "flex",
    flexWrap: "wrap",
    gap: "20px",
  },
  column: {
    flex: "1 1 calc(50% - 10px)",
    minWidth: "300px",
  },
  formGroup: {
    marginBottom: "20px",
  },
  input: {
    width: "100%",
    padding: "10px",
    fontSize: "16px",
    borderRadius: "4px",
    border: "1px solid #ccc",
    height: "40px",
    boxSizing: "border-box",
  },
  select: {
    width: "100%",
    padding: "10px",
    fontSize: "16px",
    borderRadius: "4px",
    border: "1px solid #ccc",
    height: "40px",
    boxSizing: "border-box",
  },
  button: {
    padding: "10px 20px",
    fontSize: "16px",
    color: "#fff",
    backgroundColor: "#1a73e8",
    border: "none",
    borderRadius: "4px",
    cursor: "pointer",
    marginTop: "20px",
  },
};
