import React, { useState, useEffect } from "https://esm.sh/react@18.2.0";

import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";

function App() {

const [words, setWords] = useState<string[]>([]);

const [startWord, setStartWord] = useState('');

const [endWord, setEndWord] = useState('');

const [resultWords, setResultWords] = useState<string[]>([]);

useEffect(() => {

fetch('/words')

.then(response => response.json())

.then(data => setWords(data));

}, []);

const handleSearch = () => {

const start = startWord.toUpperCase() || 'AAAAA';

const end = endWord.toUpperCase() || 'ZZZZZ';

const filteredWords = words

.filter(word => word.toUpperCase() >= start && word.toUpperCase() <= end)

.sort();

setResultWords(filteredWords);

};

return (

<div style={{ fontFamily: 'monospace', padding: '20px' }}>

<h1>📖 Word Range Finder</h1>

<div>

<input

type="text"

placeholder="Start Word"

value={startWord}

onChange={(e) => setStartWord(e.target.value.toUpperCase())}