"use client";

import { TrendingDown, TrendingUp } from "lucide-react";

// Trend indicator component for metric cards
export const TrendIndicator = ({
    current,
    previous,
}: {
    current: number;
    previous: number;
}) => {
    if (!current || !previous) return null;

    const percentChange = ((current - previous) / previous) * 100;

    if (Math.abs(percentChange) < 0.1) return null;

    return (
        <div
            className={`flex items-center text-xs font-medium ${percentChange >= 0 ? "text-green-500" : "text-red-500"}`}
        >
            {percentChange >= 0 ? (
                <TrendingUp className="h-3 w-3 mr-1" />
            ) : (
                <TrendingDown className="h-3 w-3 mr-1" />
            )}
            {Math.abs(percentChange).toFixed(1)}%
        </div>
    );
};