import React from 'react';
import { Card, CardContent } from '@admin/components/ui/card';
import { ArrowUpIcon, ArrowDownIcon, TrendingUp, TrendingDown } from 'lucide-react';
import { cn } from '@admin/lib/utils';

interface KPICardProps {
    title: string;
    value: string | number;
    change?: number;
    trend?: 'up' | 'down';
    subtitle?: string;
    icon?: React.ComponentType<any>;
    iconColor?: string;
    iconBg?: string;
}

export function KPICard({
    title,
    value,
    change,
    trend,
    subtitle,
    icon: Icon,
    iconColor = 'text-blue-600',
    iconBg = 'bg-blue-100',
}: KPICardProps) {
    const isPositiveTrend = trend === 'up';
    const showChange = change !== undefined && change !== 0;

    return (
        <Card className="group hover:shadow-lg transition-all duration-300 border-0 bg-white">
            <CardContent className="p-6">
                <div className="flex items-start justify-between mb-4">
                    <div className="flex-1">
                        <p className="text-sm font-medium text-gray-600 mb-1">{title}</p>
                        <div className="flex items-baseline gap-2">
                            <h3 className="text-3xl font-bold text-gray-900 tracking-tight">{value}</h3>
                            {showChange && (
                                <span
                                    className={cn(
                                        'flex items-center gap-0.5 text-sm font-semibold',
                                        isPositiveTrend ? 'text-green-600' : 'text-red-600'
                                    )}
                                >
                                    {isPositiveTrend ? (
                                        <TrendingUp className="h-4 w-4" />
                                    ) : (
                                        <TrendingDown className="h-4 w-4" />
                                    )}
                                    {Math.abs(change)}%
                                </span>
                            )}
                        </div>
                        {subtitle && (
                            <p className="text-xs text-gray-500 mt-2">{subtitle}</p>
                        )}
                    </div>
                    {Icon && (
                        <div className={cn('p-3 rounded-xl', iconBg)}>
                            <Icon className={cn('h-6 w-6', iconColor)} />
                        </div>
                    )}
                </div>
            </CardContent>
        </Card>
    );
}