import './style.css';
import bible from '../../nkjvbible';

export function Home({book, chapter}: {book: {
    get: () => any;
    set: (book: any) => void;
}, chapter: {
    get: () => number;
    set: (chapter: any) => void;
}}) {

	return (
		<div class="home">
			<a href="https://preactjs.com" target="_blank">
				<svg width="150" height="150" fill="none" stroke="#A2D2DF" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
					<path d='M5 20.25c0 .414.336.75.75.75h10.652C17.565 21 18 20.635 18 19.4v-1.445M5 20.25A2.25 2.25 0 0 1 7.25 18h10.152c.226 0 .425-.014.598-.045M5 20.25V6.2c0-1.136-.072-2.389 1.092-2.982C6.52 3 7.08 3 8.2 3h9.2c1.236 0 1.6.437 1.6 1.6v11.8c0 .995-.282 1.425-1 1.555M9.5 10h5M12 7.5v5' />
				</svg>
			</a>
			<h1 style={{ color: "#A2D2DF"}}>{`${book.get()} ${+chapter.get() + 1}: 1-${bible.find(a => a.name == book.get()).chapters.length}`}</h1>
			<section>
				{bible.find(a => a.name == book.get()).chapters[chapter.get()].verses.map(verse => (
					<p style={{ textAlign: 'left', margin: '0px 0px' }} id={`${book.get()}-${chapter.get() + 1}-${verse.num}`} key={`${book.get()}-${chapter.get()}-${verse.num}`}>
						<strong>{verse.num}</strong>: {verse.text}
					</p>
				))}
			</section>
		</div>
	);
}

