"use client"

import { Card, CardContent } from "@/components/ui/card"
import { LucideIcon } from "lucide-react"

interface StatsCardProps {
    title: string
    subtitle?: string
    value: number | string
    icon: LucideIcon
    isLoading?: boolean
}

export function StatsCard({
    title,
    subtitle,
    value,
    icon: Icon,
    isLoading = false
}: StatsCardProps) {
    return (
        <Card className="py-6 px-6">
            <CardContent className="p-0 flex items-center justify-between gap-6">
                <div className="flex flex-col gap-1 min-w-0">
                    <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wider">
                        {title}
                    </h3>
                    <div className="flex flex-col">
                        {isLoading ? (
                            <div className="h-10 w-24 bg-muted rounded-md mt-2 animate-pulse" />
                        ) : (
                            <>
                                <p className="text-3xl font-bold">
                                    {value}
                                </p>
                                {subtitle && (
                                    <p className="text-xs text-muted-foreground mt-1">
                                        {subtitle}
                                    </p>
                                )}
                            </>
                        )}
                    </div>
                </div>

                <div className="p-3 rounded-md bg-secondary text-secondary-foreground">
                    <Icon className="h-6 w-6" />
                </div>
            </CardContent>
        </Card>
    )
}