const [list, setList] = useState('');

if (!isOpen) {

return null;

}

const handleSave = () => {

onSave(list);

onClose();

};

return (

<div className="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">

<div className="bg-zinc-800 p-6 rounded-lg shadow-2xl w-full max-w-md border border-zinc-700">

<h2 className="text-2xl font-arvo font-normal mb-4">Load from List</h2>

<textarea

className="w-full h-48 p-2 bg-gray-900/50 rounded-md border border-gray-700"

value={list}

onChange={(e) => setList(e.target.value)}

placeholder="Paste your list here, each line is an entry (max 30 entries)"

/>

<p className="text-sm text-gray-400 mt-2">

Only the first 30 entries will be added.

</p>

<div className="flex justify-end gap-4 mt-4">

<button

onClick={onClose}

className="flex items-center gap-2 text-lg font-arvo font-normal px-4 py-2 rounded-md border transition-colors duration-300 ease-in-out bg-gray-600 text-white hover:bg-gray-700"

>

Cancel

</button>

<button

onClick={handleSave}

className="flex items-center gap-2 text-lg font-arvo font-normal px-4 py-2 rounded-md border transition-colors duration-300 ease-in-out border-app/100 bg-app/50 text-white hover:bg-app/70"

>

Save

</button>

</div>

</div>

</div>

);