import { registerVideoAction } from '../model/actions';

export function RegisterVideoForm() {
  return (
    <section className="panel" aria-labelledby="register-video-title">
      <div className="panel-header">
        <h2 id="register-video-title">Register video</h2>
      </div>
      <form className="panel-body form-grid" action={registerVideoAction}>
        <label className="field">
          <span>Title</span>
          <input name="title" placeholder="Q2 product demo" required />
        </label>
        <label className="field">
          <span>Owner</span>
          <input name="owner" placeholder="Media ops" required />
        </label>
        <label className="field">
          <span>Source URL</span>
          <input name="sourceUrl" type="url" placeholder="https://example.com/video" required />
        </label>
        <label className="field">
          <span>Status</span>
          <select name="status" defaultValue="draft">
            <option value="draft">Draft</option>
            <option value="published">Published</option>
            <option value="archived">Archived</option>
          </select>
        </label>
        <button className="submit-button" type="submit">
          Add video
        </button>
      </form>
    </section>
  );
}