import React from "react";
import styled from "styled-components";

export default function CreateBubble({
  message,
  setTitle,
  setDueDate,
  setTags,
}) {
  return (
    <StyledAddNew>
      <div className="add-new">
        {message && <div className="message">{message}</div>}
        <div className="form-item bubble-name">
          <label for="title">Title:</label>
          <input
            type="text"
            name="title"
            placeholder="title here"
            onChange={(e) => setTitle(e.target.value)}
          />
        </div>
        <div className="form-item bubble-due-date">
          <label for="duedate">Due Date:</label>
          <input
            type="date"
            name="duedate"
            onChange={(e) => setDueDate(e.target.value)}
          />
        </div>
        <div className="form-item bubble-tags">
          <label for="tags">Tags:</label>
          <input
            type="text"
            name="tags"
            placeholder="comma seperated tags"
            onChange={(e) => setTags(e.target.value)}
          />
        </div>
      </div>
    </StyledAddNew>
  );
}

const StyledAddNew = styled.div`
  .add-new {
    // @extend %font-size-h3;
    width: MIN(300px, 100vw);
    margin: auto;
    .message {
      color: var(--primary-yellow);
      margin-bottom: 18px;
    }
    input[type="text"],
    input[type="date"] {
      width: 180px;
    }
    .form-item {
      display: flex;
      margin-bottom: 12px;
      align-items: center;
      justify-content: space-between;
    }
  }
`;