'use client'

import React, { useState, useEffect } from 'react';
import { Tree } from 'primereact/tree';
import { PrimeIcons } from 'primereact/api';

export default function AffinityGroupsTree() {
    const [nodes, setNodes] = useState(
        [
            {
                key: 1,
                label: "Lilly's guests",
                icon: PrimeIcons.HEART,
                draggable: false,
                children: [
                    {
                        key: 11,
                        label: "Family",
                        icon: PrimeIcons.HOME,
                        leaf: true,
                        className: "px-4",
                    },
                    {
                        key: 12,
                        label: "Country club",
                        icon: PrimeIcons.SUN,
                        className: "px-4",

                    },
                    {
                        key: 13,
                        label: "Work",
                        icon: PrimeIcons.DESKTOP,
                        className: "px-4",
                    },
                ]
            },
            {
                key: 2,
                label: "Dave's guests",
                icon: PrimeIcons.HEART_FILL,
                draggable: false,
                children: [
                    {
                        key: 21,
                        label: "Family",
                        icon: PrimeIcons.HOME,
                        leaf: true,
                        className: "px-4",
                    },
                    {
                        key: 22,
                        label: "College friends",
                        icon: PrimeIcons.GRADUATION_CAP,
                        leaf: true,
                        className: "px-4",
                    },
                ]
            },
            {
                key: 3,
                label: "Common guests",
                icon: PrimeIcons.USERS,
                draggable: false,
                children: [
                    {
                        key: 31,
                        label: "Common workplace",
                        icon: PrimeIcons.BRIEFCASE,
                        leaf: true,
                        className: "px-4",
                    },
                    {
                        key: 32,
                        label: "Lifetime friends",
                        icon: PrimeIcons.STAR,
                        leaf: true,
                        className: "px-4",
                    },
                ]
            }
        ]);

    return (
        <div className="card flex justify-content-center">
            <Tree value={nodes} dragdropScope="affinity-groups" onDragDrop={(e) => setNodes(e.value)} className="w-full md:w-30rem" />
        </div>
    )
}