"use client";

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

type IndexCardProps = {
  label: string;
  value: string;
  delta?: string;
  positive?: boolean;
};

;

type IndexCardRowProps = {
  cards: IndexCardProps[];
  className?: string;
};

const IndexCard = memo(function IndexCard({
  label,
  value,
  delta,
  positive = true,
}: IndexCardProps) {
  return (
    <div className="index-card">
      <p className="label">{label}</p>
      <p className="value">{value}</p>
      {delta ? (
        <p className={cn("delta", positive ? "positive" : "negative")}>
          {delta}
        </p>
      ) : null}
    </div>
  );
});

export function IndexCardRow({ cards, className }: IndexCardRowProps) {
  return (
    <div className={cn("index-card-row", className)}>
      {cards.map((card, index) => (
        <IndexCard key={`${card.label}-${index}`} {...card} />
      ))}
    </div>
  );
}