import { CloseOutlined } from '@ant-design/icons'

import { a, useTransition } from '@react-spring/web'

import { Radio } from 'antd'

import { Provider, atom, useAtom, useSetAtom } from 'jotai'

import type { PrimitiveAtom } from 'jotai'

type Todo = {

title: string

completed: boolean

const filterAtom = atom('all')

const todosAtom = atom<PrimitiveAtom<Todo>[]>([])

const filteredAtom = atom<PrimitiveAtom<Todo>[]>((get) => {

const filter = get(filterAtom)

const todos = get(todosAtom)

if (filter === 'all') return todos

else if (filter === 'completed')

return todos.filter((atom) => get(atom).completed)

else return todos.filter((atom) => !get(atom).completed)

type RemoveFn = (item: PrimitiveAtom<Todo>) => void

type TodoItemProps = {

atom: PrimitiveAtom<Todo>

remove: RemoveFn

const TodoItem = ({ atom, remove }: TodoItemProps) => {

const [item, setItem] = useAtom(atom)

const toggleCompleted = () =>

setItem((props) => ({ ...props, completed: !props.completed }))

return (

<>

<input

type="checkbox"