"use client"

import * as React from "react"
import { TrendingUp, TrendingDown } from "lucide-react"
import { cn } from "@/lib/utils"
import { Card } from "@/components/ui/card"

interface KPICardProps {
    label: string
    value: string | number
    change?: string
    isUp?: boolean
    subtext?: string
    icon?: React.ReactNode
    className?: string
}

export const KPICard = React.memo(({
    label,
    value,
    change,
    isUp,
    subtext,
    icon,
    className
}: KPICardProps) => {
    return (
        <Card className={cn(
            "gap-0 p-4.5 hover:shadow-[0px_6px_25px_0px_rgba(108,99,255,0.1)] hover:scale-[1.02] duration-300 transition-all cursor-default select-none border-white/60",
            className
        )}>
            <div className="flex justify-between items-start mb-2">
                <span className="text-[10px] font-bold text-gray-700 uppercase tracking-widest font-['Lexend_Deca']">
                    {label}
                </span>
                {icon && <div className="bg-bg/60 p-1.5 rounded-lg opacity-80 backdrop-blur-sm">{icon}</div>}
            </div>

            <div className="text-[20px] font-extrabold text-text font-['Lexend'] tracking-tight leading-tight mb-1.5">
                {value}
            </div>

            {(change || subtext) && (
                <div className="flex flex-col items-start gap-1.5 mt-auto">
                    {change && (
                        <span className={cn(
                            "text-[10px] font-bold px-2 py-0.5 rounded-full flex items-center gap-0.5 shadow-sm w-fit",
                            isUp ? "bg-emerald-100/80 text-emerald-600 border border-emerald-200/50" : "bg-rose-100/80 text-rose-600 border border-rose-200/50"
                        )}>
                            {isUp ? <TrendingUp size={10} /> : <TrendingDown size={10} />}
                            {change}
                        </span>
                    )}
                    {subtext && (
                        <span className="text-[9px] text-gray-700 font-bold font-['Lexend_Deca'] uppercase tracking-tight opacity-90 leading-snug">
                            {subtext}
                        </span>
                    )}
                </div>
            )}
        </Card>
    )
})

KPICard.displayName = "KPICard"