import { Todo, UserWithTodos } from '@homeman/models.ts'

export interface Props {
	user: UserWithTodos
}

export function TodoList({ user: { avatarUrl, assignedTodos, name } }: Props) {
	const todoItem = ({ description }: Todo) => (
		<li class='bg-white dark:bg-black drop-shadow-xl'>{description}</li>
	)
	return (
		<div class='p-2 w-1/4 min-w-[10rem] relative flex flex-col grow-0'>
			{avatarUrl != null
				? (
					<img
						class='rounded-full w-full mb-2'
						src={avatarUrl}
						title={`${name}'s avatar`}
					/>
				)
				: null}
			<span class='text-sky-800 dark:text-sky-200 font-semibold text-center'>
				{name}
			</span>
			<button class='mt-4 mb-4 text-left w-full px-2 py-1 rounded-lg border-[1px] text-stone-500 border-stone-500 opacity-50 hover:opacity-100'>
				+ New
			</button>
			<ul class=''>
				{assignedTodos.length < 1
					? (
						<li class='p-4 rounded-lg text-center drop-shadow-xl bg-white dark:bg-stone-900'>
							All clear! 🎉
						</li>
					)
					: assignedTodos.map(todoItem)}
			</ul>
		</div>
	)
}