import { Text, View } from "@tarojs/components";
import type { KvMetric } from "../../pages/report/types";
import { getStatusTone } from "../../pages/report/report-utils";

type ReportKvListProps = {
  title: string;
  items: KvMetric[];
};

export function ReportKvList({ title, items }: ReportKvListProps) {
  return (
    <View className="report-card">
      <View className="report-card__header">
        <Text className="report-card__title">{title}</Text>
      </View>
      <View className="kv-list">
        {items.map((item) => (
          <View className="kv-list__row" key={item.label}>
            <Text className="kv-list__label">{item.label}</Text>
            <View className="kv-list__value-wrap">
              <Text className="kv-list__value">{item.value}</Text>
              {item.status ? <Text className={`kv-list__status kv-list__status--${getStatusTone(item.status)}`}>{item.status}</Text> : null}
            </View>
          </View>
        ))}
      </View>
    </View>
  );
}