import React from "react";
import { cn } from "@/lib/utils";

export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
  hoverable?: boolean;
}

export function Card({ className, hoverable = false, children, ...props }: CardProps) {
  return (
    <div
      className={cn(
        // PRD §13 & §6: rounded-xl border border-slate-200 bg-white shadow-sm
        "rounded-xl border border-slate-200 bg-white shadow-sm transition-shadow",
        hoverable && "hover:shadow-md",
        className
      )}
      {...props}
    >
      {children}
    </div>
  );
}

export interface KpiCardProps {
  label: string;
  value: string | number;
  subtext?: string;
  trend?: string;
  icon?: React.ElementType;
  iconColor?: string;
  iconBg?: string;
  className?: string;
}

export function KpiCard({
  label,
  value,
  subtext,
  trend,
  icon: Icon,
  iconColor = "text-[#0B1F33]",
  iconBg = "bg-slate-50 border-slate-100",
  className,
}: KpiCardProps) {
  return (
    <Card className={cn("p-5 flex flex-col justify-between", className)}>
      <div className="flex items-start justify-between gap-4 mb-2">
        <div className="min-w-0">
          {/* PRD §14: text-sm font-medium text-slate-500 */}
          <span className="text-sm font-medium text-slate-500 block truncate">
            {label}
          </span>
          {/* PRD §14: text-2xl font-semibold tracking-tight text-[#0B1F33] */}
          <span className="text-2xl font-semibold tracking-tight text-[#0B1F33] block mt-1">
            {value}
          </span>
        </div>
        {Icon && (
          <div
            className={cn(
              "w-10 h-10 rounded-xl border flex items-center justify-center shrink-0 shadow-2xs",
              iconBg
            )}
          >
            <Icon className={cn("w-5 h-5", iconColor)} />
          </div>
        )}
      </div>

      {(trend || subtext) && (
        <div className="pt-2 border-t border-slate-100 flex items-center justify-between text-xs mt-2">
          {trend && (
            <span className="font-semibold text-emerald-600">
              {trend}
            </span>
          )}
          {subtext && (
            <span className="text-slate-400 truncate">{subtext}</span>
          )}
        </div>
      )}
    </Card>
  );
}