
import { NodeViewWrapper, NodeViewContent, NodeViewProps } from '@tiptap/react'
import React from 'react'
import { cn } from '@/lib/utils'

export const TaskItemComponent: React.FC<NodeViewProps> = ({ node, updateAttributes }) => {
    return (
        <NodeViewWrapper as="li" data-type="taskItem" className="relative !pl-7 !my-1 task-item-custom group">
            {/* Absolute Checkbox Wrapper */}
            <div
                className="absolute left-0 top-[-3.5px] !flex !items-center !justify-center !h-[1.5em] !w-5 select-none"
                contentEditable={false}
            >
                <input
                    type="checkbox"
                    checked={node.attrs.checked}
                    onChange={event => updateAttributes({ checked: event.target.checked })}
                    className="peer h-4 w-4 !m-0 rounded border border-zinc-400 bg-transparent accent-green-600 cursor-pointer appearance-none checked:bg-green-600 checked:border-green-600 checked:bg-[url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22white%22%3E%3Cpath%20d%3D%22M12.207%204.793a1%201%200%20010%201.414l-5%205a1%201%200%2001-1.414%200l-2-2a1%201%200%20011.414-1.414L6.5%209.086l4.293-4.293a1%201%200%20011.414%200z%22%2F%3E%3C%2Fsvg%3E')] bg-center bg-no-repeat bg-[length:100%_100%] transition-all"
                />
            </div>
            {/* Text Content */}
            <NodeViewContent className={cn(
                "!min-w-0 transition-opacity !p-0 [&>p]:!m-0 [&>p]:!p-0 [&>p]:!leading-normal",
                node.attrs.checked && "opacity-50 text-zinc-500 line-through decoration-zinc-500"
            )} />
        </NodeViewWrapper>
    )
}
