import React from 'react';

export default function CardInfo({
    title,
    value,
    icon,
    trend,
    className,
    trendText,
    trendDirection,
}: {
    title?: string;
    value?: string | number;
    icon?: React.ReactNode;
    className?: string;
    trend?: string | number;
    trendText?: string;
    trendDirection?: 'text-success' | 'text-danger';
}) {
    return (
        <div className={`card ${className || ''}`}>
            <div className="card-body">
                <label className="card-title fw-medium mb-1">{title}</label>
                <h3 className="card-value mb-1 gap-2 d-flex align-items-center">
                    {icon} {value}
                </h3>
                <small>
                    <span className={`d-inline-flex ${trendDirection}`}>
                        {trend} <i className={`ri-arrow-${trendDirection === 'text-success' ? 'up' : 'down'}-line`} />
                    </span>{' '}
                    {trendText}
                </small>
            </div>
        </div>
    );
}