"use client";

import { useState } from "react";
import { publishPost } from "@/app/actions/community";

export function Composer({ isSteward, error }: { isSteward: boolean; error?: boolean }) {
  const [kind, setKind] = useState("discussion");

  return (
    <form action={publishPost} className="composer">
      <p className="eg-eyebrow">Post to the floor</p>
      {error ? <p className="composer__error">Add a title and a note.</p> : null}
      <label className="eg-label" htmlFor="kind">
        Type
      </label>
      <select id="kind" name="kind" value={kind} onChange={(event) => setKind(event.target.value)}>
        <option value="discussion">Question</option>
        <option value="update">Update</option>
        {isSteward ? <option value="announcement">Notice</option> : null}
        <option value="event">Event</option>
      </select>
      <label className="eg-label" htmlFor="title">
        Title
      </label>
      <input id="title" name="title" placeholder="Short, specific" required />
      <label className="eg-label" htmlFor="body">
        Note
      </label>
      <textarea id="body" name="body" rows={4} placeholder="One thought for the trade" required />
      {kind === "event" ? (
        <div className="grid gap-3 md:grid-cols-2">
          <div>
            <label className="eg-label" htmlFor="location">
              Place
            </label>
            <input id="location" name="location" placeholder="Bangkok, Online…" />
          </div>
          <div>
            <label className="eg-label" htmlFor="eventAt">
              When
            </label>
            <input id="eventAt" name="eventAt" type="datetime-local" />
          </div>
        </div>
      ) : null}
      <button className="eg-btn eg-btn-solid w-fit" type="submit">
        Publish
      </button>
    </form>
  );
}