import { Stack } from '@mantine/core';
import type { Theme } from 'types';
import ThemeSelect from './ThemeSelect';

function TimeOfDay({
	createPlaylist,
	themeList,
	allThemes,
	selectedPlaylist,
}: { createPlaylist: any; themeList: any; allThemes: Theme[]; selectedPlaylist: any }) {
	return (
		<Stack>
			<ThemeSelect
				allThemes={allThemes}
				createPlaylist={createPlaylist}
				themeList={themeList}
				selectedPlaylist={selectedPlaylist}
				index='0'
				timeIndex='00:00 - 05:59'
			/>
			<ThemeSelect
				allThemes={allThemes}
				createPlaylist={createPlaylist}
				themeList={themeList}
				selectedPlaylist={selectedPlaylist}
				index='1'
				timeIndex='06:00 - 11:59'
			/>
			<ThemeSelect
				allThemes={allThemes}
				createPlaylist={createPlaylist}
				themeList={themeList}
				selectedPlaylist={selectedPlaylist}
				index='2'
				timeIndex='12:00 - 17:59'
			/>
			<ThemeSelect
				allThemes={allThemes}
				createPlaylist={createPlaylist}
				themeList={themeList}
				selectedPlaylist={selectedPlaylist}
				index='3'
				timeIndex='18:00 - 23:59'
			/>
		</Stack>
	);
}

export default TimeOfDay;