import { useState } from "react";

interface TextShareModalProps {
  onSend: (text: string) => void;
  onClose: () => void;
}

export default function TextShareModal({ onSend, onClose }: TextShareModalProps) {
  const [text, setText] = useState("");

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (text.trim()) {
      onSend(text.trim());
      onClose();
    }
  };

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-ink/40 p-4"
      onClick={onClose}
    >
      <div
        className="paper-panel shadow-lift rounded-sm p-6 w-full max-w-md"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="text-xs uppercase tracking-[0.2em] text-ink-muted">
          Compose
        </div>
        <h2 className="font-display text-2xl text-ink mt-1 mb-5">Send text</h2>
        <form onSubmit={handleSubmit}>
          <textarea
            autoFocus
            value={text}
            onChange={(e) => setText(e.target.value)}
            placeholder="Message, link, snippet…"
            className="w-full h-32 bg-paper border border-paper-edge rounded-sm p-3
                       text-sm text-ink placeholder:text-ink-faint resize-none
                       focus:outline-none focus:border-ink transition-colors
                       duration-fast ease-crisp"
          />
          <div className="flex justify-end gap-3 mt-5">
            <button
              type="button"
              onClick={onClose}
              className="px-3 py-2 text-sm text-ink-muted hover:text-ink transition-colors"
            >
              Cancel
            </button>
            <button
              type="submit"
              disabled={!text.trim()}
              className="px-5 py-2 bg-ink text-paper text-sm font-medium rounded-sm
                         hover:bg-signal transition-colors duration-fast ease-crisp
                         disabled:opacity-30 disabled:cursor-not-allowed"
            >
              Send →
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}