import { Mic, Plus, Send, Smile } from "lucide-react";

function MessageInput({ value, onChange, onSubmit, canSend, placeholder, inputRef }) {
  return (
    <form
      onSubmit={onSubmit}
      className="flex items-end gap-2 px-3 sm:px-4 py-3 border-t border-line bg-base"
    >
      <label htmlFor="chat-input" className="sr-only">
        Message
      </label>
      <button
        type="button"
        aria-label="Attach"
        className="w-10 h-10 flex-shrink-0 rounded-full bg-transparent border-0 text-fg-secondary cursor-pointer inline-flex items-center justify-center hover:bg-hover transition-colors duration-fast"
      >
        <Plus size={18} strokeWidth={1.75} />
      </button>
      <div className="flex-1 min-h-[40px] px-3.5 py-2 bg-surface border border-line rounded-[20px] flex items-center gap-2 focus-within:border-line-strong transition-colors duration-fast">
        <input
          id="chat-input"
          ref={inputRef}
          value={value}
          onChange={onChange}
          autoComplete="off"
          placeholder={placeholder}
          className="flex-1 min-w-0 bg-transparent border-none outline-none text-fg font-sans text-sm tracking-[-0.005em]"
        />
        <button
          type="button"
          aria-label="Emoji"
          className="flex-shrink-0 w-6 h-6 bg-transparent border-0 text-fg-tertiary cursor-pointer inline-flex items-center justify-center hover:text-fg-secondary transition-colors duration-fast"
        >
          <Smile size={16} strokeWidth={1.75} />
        </button>
      </div>
      {canSend ? (
        <button
          type="submit"
          aria-label="Send"
          className="w-10 h-10 flex-shrink-0 rounded-full border-0 bg-accent text-accent-fg cursor-pointer inline-flex items-center justify-center transition-colors duration-fast ease-out-expo"
        >
          <Send size={16} strokeWidth={1.75} />
        </button>
      ) : (
        <button
          type="button"
          aria-label="Voice message"
          className="w-10 h-10 flex-shrink-0 rounded-full bg-transparent border-0 text-fg-secondary cursor-pointer inline-flex items-center justify-center transition-colors duration-fast ease-out-expo hover:bg-hover"
        >
          <Mic size={18} strokeWidth={1.75} />
        </button>
      )}
    </form>
  );
}

window.MessageInput = MessageInput;