import type { FormEvent } from "react";

export interface ComposerProps {
  value: string;
  busy: boolean;
  error: boolean;
  onChange: (value: string) => void;
  onSubmit: () => void;
}

export function Composer({ value, busy, error, onChange, onSubmit }: ComposerProps) {
  const empty = value.trim().length === 0;
  function submit(e: FormEvent) {
    e.preventDefault();
    if (!empty && !busy) onSubmit();
  }
  return (
    <form className="composer" onSubmit={submit}>
      <label htmlFor="composer-text" className="composer-label">New post</label>
      <textarea
        id="composer-text"
        value={value}
        rows={3}
        placeholder="Share something with the feed"
        disabled={busy}
        onChange={(e) => onChange(e.target.value)}
      />
      {error ? (
        <p className="error" role="alert">Publishing the post failed. Your text is still here.</p>
      ) : null}
      <button type="submit" className="composer-post" disabled={empty || busy}>
        {busy ? "Posting" : "Post"}
      </button>
    </form>
  );
}