import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo } from 'react';
import { cn } from '../../../../../scalars/index.js';
import { mockData } from '../../mock-data.js';
import { ObjectSetTable } from '../../object-set-table.js';
import { Icon } from '../../../icon/icon.js';
import { Tooltip, TooltipProvider } from '../../../tooltip/tooltip.js';
const CustomRenderingExample = () => {
    const columns = useMemo(() => [
        {
            field: 'firstName',
            title: 'User',
            renderCell: (value) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-blue-100 text-blue-800 font-semibold text-xs", children: value.charAt(0).toUpperCase() }), _jsx("span", { className: "font-medium", children: value })] })),
            sortable: true,
        },
        {
            field: 'status',
            renderHeader: (value) => (_jsxs("div", { className: "flex items-center px-[12px] py-[15px] text-left text-[14px] font-medium leading-[14px] text-gray-500", children: [_jsx("span", { children: value }), _jsx(TooltipProvider, { children: _jsx(Tooltip, { content: "User status", side: "right", children: _jsx(Icon, { name: "InfoSquare", size: 16, className: "ml-1 text-gray-500" }) }) })] })),
            renderCell: (value) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: cn('h-2 w-2 rounded-full', value === 'active' ? 'bg-green-500' : 'bg-red-500') }), _jsx("span", { className: cn('font-medium', value === 'active' ? 'text-green-700' : 'text-red-700'), children: value.charAt(0).toUpperCase() + value.slice(1) })] })),
        },
        {
            field: 'payment',
            type: 'number',
            renderCell: (value) => (_jsxs("div", { className: "flex items-center justify-end", children: [_jsxs("span", { className: "font-semibold text-gray-900", children: ["$", value.toLocaleString()] }), value > 1000000 ? (_jsx(Icon, { name: "ArrowUp", size: 16, className: "ml-1 text-green-500" })) : (_jsx(Icon, { name: "ArrowUp", size: 16, className: "ml-1 text-red-500 rotate-180" }))] })),
            sortable: true,
            defaultSortDirection: 'desc',
        },
        {
            field: 'isActive',
            title: 'Active',
            renderCell: (value) => (_jsx("div", { className: "flex justify-center", children: value ? (_jsx(Icon, { name: "CheckCircle", size: 20, className: "text-green-500" })) : (_jsx(Icon, { name: "CrossCircle", size: 20, className: "text-red-500" })) })),
        },
    ], []);
    return _jsx(ObjectSetTable, { columns: columns, data: mockData, minRowCount: 10 });
};
export default CustomRenderingExample;
//# sourceMappingURL=custom-rendering.js.map