'use strict';

var tslib_es6 = require('../node_modules/.pnpm/@rollup_plugin-typescript@12.1.4_rollup@4.46.2_tslib@2.8.1_typescript@5.9.3/node_modules/tslib/tslib.es6.js');
var jsxRuntime = require('react/jsx-runtime');
var server = require('next-intl/server');
var utils = require('@windrun-huaiin/lib/utils');
var server$1 = require('@windrun-huaiin/base-ui/components/server');
var lib = require('@windrun-huaiin/base-ui/lib');
var richTextExpert = require('./rich-text-expert.js');
var sectionLayout = require('./section-layout.js');

function Usage(_a) {
    return tslib_es6.__awaiter(this, arguments, void 0, function* ({ locale, sectionClassName }) {
        const t = yield server.getTranslations({ locale, namespace: 'usage' });
        // Process translation data
        const steps = t.raw('steps');
        const data = {
            title: t('title'),
            eyesOn: t('eyesOn'),
            description: richTextExpert.richText(t, 'description'),
            steps: steps.map((step, index) => ({
                id: `usage-step-${index}`,
                title: step.title,
                description: richTextExpert.richText(t, `steps.${index}.description`),
                iconKey: step.iconKey,
                stepNumber: index + 1
            }))
        };
        return (jsxRuntime.jsxs("section", { id: "usage", className: utils.cn(sectionLayout.responsiveSection, sectionClassName), children: [jsxRuntime.jsxs("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-4", children: [data.title, " ", jsxRuntime.jsx("span", { className: lib.themeIconColor, children: data.eyesOn })] }), jsxRuntime.jsx("p", { className: "text-center text-gray-600 dark:text-gray-400 mb-12 text-base sm:text-lg mx-auto max-w-3xl", children: data.description }), jsxRuntime.jsx("div", { className: "bg-gray-50 dark:bg-gray-800/60 border border-gray-200 dark:border-gray-700 rounded-2xl p-8 md:p-12 shadow-sm dark:shadow-none", children: jsxRuntime.jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8 gap-y-12", children: data.steps.map((step) => {
                            const Icon = server$1.getGlobalIcon(step.iconKey);
                            return (jsxRuntime.jsxs("div", { "data-usage-step": step.id, className: "flex items-start", children: [jsxRuntime.jsx("div", { className: "shrink-0 mr-4", children: jsxRuntime.jsx(Icon, { className: "w-8 h-8" }) }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("h3", { className: "text-xl font-semibold mb-3 text-gray-900 dark:text-gray-100 flex items-center", children: `${step.stepNumber}. ${step.title}` }), jsxRuntime.jsx("p", { className: "text-gray-700 dark:text-gray-300", children: step.description })] })] }, step.id));
                        }) }) })] }));
    });
}

exports.Usage = Usage;
