16. Sticky Notes

function StickyNote({ note, onUpdate, onDelete }) {
  const [editing, setEditing] = useState(false);
  const [text, setText] = useState(note.text);

  function save() {
    onUpdate(note.id, { text });
    setEditing(false);
  }

  return (
    <div
      className="sticky-note"
      style={{ backgroundColor: note.color, transform: `rotate(${note.rotation}deg)` }}
    >
      {editing ? (
        <textarea value={text} onChange={(e) => setText(e.target.value)} onBlur={save} autoFocus />
      ) : (
        <p onClick={() => setEditing(true)}>{text || 'Kliknij, aby edytować...'}</p>
      )}
      <button className="delete-btn" onClick={() => onDelete(note.id)}>✕</button>
    </div>
  );
}