'use client';

import React from 'react';
import { TrendingUp, TrendingDown, Minus } from 'lucide-react';

interface StatCardProps {
    title: string;
    value: string | number;
    subtitle?: string;
    trend?: {
        direction: 'up' | 'down' | 'flat';
        percentage: number;
        isNew?: boolean;
        period?: string;
    };
    icon?: React.ReactNode;
    variant?: 'default' | 'highlight';
}

const StatCard: React.FC<StatCardProps> = ({
    title,
    value,
    subtitle,
    trend,
    icon,
    variant = 'default',
}) => {
    const getTrendColor = () => {
        if (!trend) return 'text-gray-500';
        if (trend.direction === 'up') return 'text-emerald-600';
        if (trend.direction === 'down') return 'text-red-500';
        return 'text-gray-500';
    };

    const getTrendIcon = () => {
        if (!trend) return null;
        if (trend.direction === 'up') return <TrendingUp className="w-4 h-4" />;
        if (trend.direction === 'down') return <TrendingDown className="w-4 h-4" />;
        return <Minus className="w-4 h-4" />;
    };

    return (
        <div
            className={`rounded-xl p-6 transition-all duration-200 ${variant === 'highlight'
                    ? 'bg-gradient-to-br from-primary-500 to-primary-600 text-white shadow-lg shadow-primary-500/25'
                    : 'bg-white border border-gray-200 hover:shadow-md'
                }`}
        >
            <div className="flex items-start justify-between">
                <div className="flex-1">
                    <p
                        className={`text-sm font-medium ${variant === 'highlight' ? 'text-primary-100' : 'text-gray-500'
                            }`}
                    >
                        {title}
                    </p>
                    <p
                        className={`text-3xl font-bold mt-2 ${variant === 'highlight' ? 'text-white' : 'text-gray-900'
                            }`}
                    >
                        {typeof value === 'number' ? value.toLocaleString() : value}
                    </p>
                    {trend && (
                        <div className={`flex items-center gap-1 mt-3 ${getTrendColor()}`}>
                            {getTrendIcon()}
                            <span className="text-sm font-medium">
                                {trend.direction === 'up' ? '+' : trend.direction === 'down' ? '-' : ''}
                                {trend.percentage}%
                                {trend.isNew && ' (new)'}
                            </span>
                            {trend.period && (
                                <span
                                    className={`text-sm ${variant === 'highlight' ? 'text-primary-200' : 'text-gray-400'
                                        }`}
                                >
                                    vs last {trend.period}
                                </span>
                            )}
                        </div>
                    )}
                    {subtitle && !trend && (
                        <p
                            className={`text-sm mt-2 ${variant === 'highlight' ? 'text-primary-200' : 'text-gray-500'
                                }`}
                        >
                            {subtitle}
                        </p>
                    )}
                </div>
                {icon && (
                    <div
                        className={`p-3 rounded-lg ${variant === 'highlight' ? 'bg-white/20' : 'bg-gray-100'
                            }`}
                    >
                        {icon}
                    </div>
                )}
            </div>
        </div>
    );
};

export default StatCard;
