// ================================================================
// Composer — used on home + chat
// ================================================================

const Composer = ({ value, onChange, onSend, autoFocus, large = false, disabled, animatedPlaceholder }) => {
  const taRef = React.useRef(null);

  React.useEffect(() => {
    if (autoFocus && taRef.current) taRef.current.focus();
  }, [autoFocus]);

  React.useEffect(() => {
    if (taRef.current) {
      taRef.current.style.height = 'auto';
      taRef.current.style.height = Math.min(taRef.current.scrollHeight, 200) + 'px';
    }
  }, [value]);

  const handleKey = (e) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      if (value.trim() && !disabled) onSend();
    }
  };

  const showAnimated = large && animatedPlaceholder !== undefined && !value;

  return (
    <div className="composer-wrap">
      <div className="composer">
        <div className="composer-ta-wrap">
          {showAnimated && (
            <div className="composer-ph" aria-hidden="true">
              {animatedPlaceholder}<span className="composer-ph-cursor" />
            </div>
          )}
          <textarea
            ref={taRef}
            value={value}
            onChange={(e) => onChange(e.target.value)}
            onKeyDown={handleKey}
            placeholder={showAnimated ? "" : (large ? "Ask me about my work, skills, or experience…" : "Ask a follow-up question…")}
            rows={1}
          />
        </div>
        <div className="composer-toolbar">
          <button className="send-btn" disabled={!value.trim() || disabled} onClick={onSend}>
            <Icon name="arrow-up" />
          </button>
        </div>
      </div>
    </div>
  );
};

window.Composer = Composer;