"use client";

import { ReactNode } from "react";
import { ArrowTrendingUpIcon as TrendingUpIcon, ArrowTrendingDownIcon as TrendingDownIcon } from "@heroicons/react/24/outline";

interface StatsCardProps {
    title: string;
    value: string | number;
    icon: ReactNode;
    trend?: {
        value: string | number;
        label: string;
        type: "up" | "down" | "neutral";
    };
    description?: string;
}

export default function StatsCard({
    title,
    value,
    icon,
    trend,
    description
}: StatsCardProps) {
    return (
        <div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6 transition-all group">
            <div className="flex items-start justify-between">
                <div>
                    <p className="text-sm font-medium text-zinc-500 dark:text-zinc-400">
                        {title}
                    </p>
                    <h3 className="mt-1 text-2xl font-bold text-zinc-900 dark:text-white group-hover:text-brand-500 transition-colors">
                        {value}
                    </h3>

                    {trend && (
                        <div className="mt-2 flex items-center gap-1.5">
                            <div className={`flex items-center gap-0.5 px-1.5 py-0.5 rounded-full text-[10px] font-bold ${trend.type === 'up'
                                ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/20 dark:text-emerald-400'
                                : trend.type === 'down'
                                    ? 'bg-red-100 text-red-700 dark:bg-red-900/20 dark:text-red-400'
                                    : 'bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-400'
                                }`}>
                                {trend.type === 'up' && <TrendingUpIcon className="w-3 h-3" />}
                                {trend.type === 'down' && <TrendingDownIcon className="w-3 h-3" />}
                                {trend.value}
                            </div>
                            <span className="text-[10px] text-zinc-500 dark:text-zinc-500">
                                {trend.label}
                            </span>
                        </div>
                    )}

                    {description && !trend && (
                        <p className="mt-2 text-xs text-zinc-500 dark:text-zinc-500">
                            {description}
                        </p>
                    )}
                </div>

                <div className="p-3 bg-zinc-50 dark:bg-zinc-800 rounded-xl text-zinc-500 dark:text-zinc-400 group-hover:bg-brand-50 dark:group-hover:bg-brand-900/10 group-hover:text-brand-500 transition-all">
                    {icon}
                </div>
            </div>
        </div>
    );
}