import { jsx, jsxs } from 'react/jsx-runtime';
import React__default from 'react';
import { cn } from '../../../utils/cn.js';
import { metricTheme } from './Metric.theme.js';
import { ArrowTrendingUpIcon, ArrowTrendingDownIcon } from '@heroicons/react/24/outline';

const Metric = React__default.forwardRef(({ value, label, subtitle, trendValue, trendDirection = "up", trendChart, size = "md", variant = "filled", color = "primary", icon, className, ...props }, ref) => {
    var _a;
    const trendIcon = trendDirection === "up" ? (jsx(ArrowTrendingUpIcon, { className: "size-3.5", strokeWidth: 2.5 })) : (jsx(ArrowTrendingDownIcon, { className: "size-3.5", strokeWidth: 2.5 }));
    const sizeStyles = metricTheme.sizes[size];
    const variantStyles = metricTheme.variants[variant];
    const variantColorStyles = metricTheme.variantColors[variant] || "";
    const iconStyles = ((_a = metricTheme.iconContainerVariantColors[variant]) === null || _a === void 0 ? void 0 : _a[color]) || "";
    return (jsx("div", { ref: ref, className: cn(metricTheme.baseStyle, variantStyles, variantColorStyles, sizeStyles.container, className), "data-size": size, ...props, children: jsxs("div", { className: "flex flex-col gap-3 ", children: [jsxs("div", { className: cn("flex items-start gap-3", sizeStyles.contentPadding), children: [icon && (jsx("div", { className: cn(metricTheme.iconContainerStyle, iconStyles, sizeStyles.iconContainer), children: icon })), jsxs("div", { className: "flex flex-col flex-1", children: [typeof label === 'string' ? (jsx("div", { className: cn(metricTheme.labelStyle, sizeStyles.label), children: label })) : label, jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: cn(metricTheme.valueStyle, sizeStyles.value), children: value }), trendValue && (typeof trendValue === 'string' ? (jsxs("div", { className: cn("flex items-center w-fit gap-1 text-base font-medium", trendDirection === "up"
                                                ? "text-[var(--color-success)]"
                                                : "text-[var(--color-danger)]"), children: [trendIcon, " ", trendValue] })) : trendValue)] }), subtitle && (typeof subtitle === 'string' ? (jsx("div", { className: cn(metricTheme.subtitleStyle, sizeStyles.subtitle), children: subtitle })) : subtitle)] })] }), trendChart && (jsx("div", { className: "w-full h-12 flex-shrink-0 -mt-4", children: trendChart }))] }) }));
});
Metric.displayName = "Metric";

export { Metric };
