import * as React from 'react';
import { cn } from '@/lib/utils';
import { Card, CardContent, CardHeader, CardTitle } from './card';
import { type LucideIcon } from 'lucide-react';

export interface StatsCardProps {
    title: string;
    value: string | number;
    description?: string;
    icon?: LucideIcon;
    trend?: {
        value: number;
        isPositive: boolean;
    };
    className?: string;
    titleClassName?: string;
    valueClassName?: string;
    descriptionClassName?: string;
    iconClassName?: string;
    href?: string;
    clickable?: boolean;
}

const StatsCard = React.memo(function StatsCard({
    title,
    value,
    description,
    icon: Icon,
    trend,
    className,
    titleClassName,
    valueClassName,
    descriptionClassName,
    iconClassName,
    href,
    clickable = false,
}: StatsCardProps) {
    const cardContent = (
        <>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className={cn("text-sm font-medium", titleClassName)}>{title}</CardTitle>
                {Icon && <Icon className={cn("h-4 w-4 text-muted-foreground", iconClassName)} />}
            </CardHeader>
            <CardContent>
                <div className={cn("text-2xl font-bold", valueClassName)}>{value}</div>
                {(description || trend) && (
                    <p className={cn("text-xs text-muted-foreground", descriptionClassName)}>
                        {trend && (
                            <span className={trend.isPositive ? 'text-green-600' : 'text-red-600'}>
                                {trend.isPositive ? '+' : '-'}{Math.abs(trend.value)}%{' '}
                            </span>
                        )}
                        {description}
                    </p>
                )}
            </CardContent>
        </>
    );

    if (clickable && href) {
        return (
            <a href={href} className="block">
                <Card className={cn('transition-all hover:shadow-md hover:scale-[1.02] cursor-pointer', className)}>
                    {cardContent}
                </Card>
            </a>
        );
    }

    return (
        <Card className={cn('', className)}>
            {cardContent}
        </Card>
    );
});

export interface StatsCardGridProps {
    children: React.ReactNode;
    columns?: 2 | 3 | 4;
    className?: string;
}

function StatsCardGrid({ children, columns = 4, className }: StatsCardGridProps) {
    const gridCols = {
        2: 'md:grid-cols-2',
        3: 'md:grid-cols-3',
        4: 'md:grid-cols-2 lg:grid-cols-4',
    };

    return (
        <div className={cn('grid gap-4', gridCols[columns], className)}>
            {children}
        </div>
    );
}

export { StatsCard, StatsCardGrid };