'use client';

export default function ProductSummary({ item }: any) {
    return (
        <div className="mb-3 pd-summary-group">
            <p className="leading-6 mb-2 text-16 font-600"> Thông số sản phẩm </p>

            <div> {renderSummary(item)}</div>
        </div>
    )
}


function renderSummary(data:any) {
    if (!data) return null;

    if (typeof data === 'string' && data.includes('<')) {
        if (typeof window === 'undefined') return null;

        const parser = new DOMParser();
        const doc = parser.parseFromString(data, 'text/html');

        return Array.from(doc.body.childNodes)
            .filter(
                node =>
                    node.nodeType === 1 && node.textContent !== null && node.textContent.trim() !== ''
            )
            .map((node, index) => (
                <div key={index} className="item-circle">
                    {node.textContent?.trim()}
                </div>
            ));
    }

    return data
        .split(/\r?\n/)
        .filter((line:any) => line.trim() !== '')
        .map((line:any, index:any) => (
            <div key={index} className="item-circle">
                {line.trim()}
            </div>
        ));
}