import { getGenres } from "app/lib/get"
import React from "react"
import { letterCase } from "app/lib/functions"
export default async function GenreCheckboxes() {

	const genres = await getGenres()
	const genreCheckboxes = genres.map(e => {
		const label = letterCase(e.name)
		return (<React.Fragment key={`fragment${e.name}`}>
			<input type="checkbox" id={e.name} key={`genreCheckboxInput${e.id}`} />
			<label htmlFor={e.name} key={`genreCheckboxLabel${e.id}`}>{label}</label>
		</React.Fragment>
		)
	})
	return <>{genreCheckboxes}</>

}