import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// packages/ui/src/components/common/TechBento.tsx
import { useState } from 'react';
import { Bento, Card, Section, Stack, Text, TONE, cn, } from '@donotdev/components';
import { techLogos } from '../../data/techLogos';
import { sanitizeSvg } from '../../utils/sanitizeSvg';
function TechCard({ techKey, variant, }) {
    const logo = techLogos[techKey];
    const [isHovered, setIsHovered] = useState(false);
    if (!logo)
        return null;
    const rawSvg = decodeURIComponent(logo.svg.replace('data:image/svg+xml,', ''));
    const decodedSvg = sanitizeSvg(rawSvg);
    return (_jsx(Card, { variant: variant, className: "dndev-tech-card", style: { '--tech-color': logo.color }, "data-hover": isHovered, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: _jsxs(Stack, { direction: "column", align: "center", gap: "tight", children: [_jsx("div", { className: "dndev-tech-card-logo", "data-tech": techKey, dangerouslySetInnerHTML: { __html: decodedSvg } }), _jsx(Text, { as: "span", level: "small", children: logo.name })] }) }));
}
export function TechBento({ title, techs, cols = 3, columns, gap = 'medium', separator = false, tone = TONE.GHOST, align, collapsible, open, onOpenChange, defaultOpen, className, }) {
    // Convert Grid's cols format to Bento's columns format
    // Grid: [mobile, tablet, laptop, desktop]
    // Bento: { mobile, tablet, desktop, wide }
    const bentoColumns = columns
        ? columns
        : typeof cols === 'number'
            ? {
                mobile: cols,
                tablet: cols,
                desktop: cols,
                wide: cols,
            }
            : {
                mobile: cols[0],
                tablet: cols[1],
                desktop: cols[2], // Grid's laptop → Bento's desktop
                wide: cols[3], // Grid's desktop → Bento's wide
            };
    const getSpan = (size) => {
        if (size === 'long')
            return { cols: 2, rows: 1 };
        if (size === 'high')
            return { cols: 1, rows: 2 };
        if (size === 'huge')
            return { cols: 2, rows: 2 };
        return undefined;
    };
    const items = techs
        .filter((tech) => techLogos[tech.name])
        .map((tech) => ({
        id: tech.name,
        content: _jsx(TechCard, { techKey: tech.name, variant: tech.variant }),
        span: getSpan(tech.size),
    }));
    const bento = (_jsx(Bento, { items: items, columns: bentoColumns, gap: gap, ariaLabel: "Technology stack" }));
    // Always use Section - TechBento is a Section with a Bento grid
    return (_jsx(Section, { title: title, separator: separator, tone: tone, align: align, collapsible: collapsible, open: open, onOpenChange: onOpenChange, defaultOpen: defaultOpen, className: cn('dndev-tech-bento', className), children: _jsx("div", { className: "dndev-tech-bento-grid", children: bento }) }));
}
export default TechBento;
