import { useEffect, useState, type ReactNode } from 'react'
import vectorClose from '../../vectors/category-close.svg'
import vectorOpen from '../../vectors/category-open.svg'
import './styles/SidebarCategory.css'

interface PropsForSidebarCategory {
    label: string
    header?: boolean
    children?: ReactNode
}

export default function SidebarCategory({ label, header, children }: PropsForSidebarCategory) {
    const key = `category_closed_${label.toLowerCase()}`
    const [closed, setClosed] = useState(localStorage.getItem(key) === 'Y')
    useEffect(() => localStorage.setItem(key, closed ? 'Y' : 'N'), [closed])

    return (
        <div className={`category ${closed ? 'close' : 'open'}`}>
            {header && (
                <button className="toggle" onClick={() => setClosed(!closed)}>
                    <span className="label">{label.toUpperCase()}</span>
                    <img
                        className="icon"
                        alt={`Toggle visibility for ${label}`}
                        src={closed ? vectorClose : vectorOpen}
                    />
                </button>
            )}

            <div className="items">{children}</div>
        </div>
    )
}