import clsx from "clsx";
import styles from "./StatusCard.module.css";
import { LucideIcon } from "lucide-react";

interface StatusCardProps {
    label: string;
    value: string | number;
    icon: LucideIcon;
    status?: "success" | "warning" | "error" | "neutral";
    trend?: string;
    href?: string;
}

import Link from "next/link";

export function StatusCard({ label, value, icon: Icon, status = "neutral", trend, href }: StatusCardProps) {
    const content = (
        <div className={clsx(styles.card, href && styles.clickable)}>
            <div className={styles.header}>
                <span className={styles.label}>{label}</span>
                <div className={clsx(styles.iconWrapper, styles[status])}>
                    <Icon size={20} />
                </div>
            </div>
            <div className={styles.content}>
                <div className={styles.value}>{value}</div>
                {trend && <div className={styles.trend}>{trend}</div>}
            </div>
        </div>
    );

    if (href) {
        return (
            <Link href={href} style={{ textDecoration: 'none' }}>
                {content}
            </Link>
        );
    }

    return content;
}