import { Show, type JSX } from "solid-js";
import { cn } from "~/lib/utils";

interface StatCardProps {
  label: string;
  value: string;
  trend?: "up" | "down";
  trendLabel?: string;
  icon: () => JSX.Element;
  class?: string;
}

export default function StatCard(props: StatCardProps) {
  const Icon = props.icon;
  return (
    <div class={cn("gradient-card border border-[var(--color-border)]/50 rounded-xl p-5", props.class)}>
      <div class="flex items-start justify-between mb-3">
        <span class="text-sm font-medium text-[var(--color-text-secondary)]">{props.label}</span>
        <div class="p-2 rounded-lg bg-[var(--color-brand-primary)]/10 text-[var(--color-brand-primary)]">
          <Icon />
        </div>
      </div>
      <div class="text-2xl font-bold text-[var(--color-text-primary)] mb-1">{props.value}</div>
      <Show when={props.trend}>
        <div class="flex items-center gap-1 text-xs">
          <svg
            width="12"
            height="12"
            viewBox="0 0 12 12"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            class={cn(
              props.trend === "up" ? "text-[var(--color-success)]" : "text-[var(--color-error)]",
            )}
          >
            <path
              d={props.trend === "up" ? "M6 9V3M6 3l-3 3M6 3l3 3" : "M6 3v6M6 9l-3-3M6 9l3-3"}
              stroke="currentColor"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
          <span class={cn(
            "font-medium",
            props.trend === "up" ? "text-[var(--color-success)]" : "text-[var(--color-error)]",
          )}>
            {props.trendLabel}
          </span>
        </div>
      </Show>
    </div>
  );
}
