import { Text, View } from "@tarojs/components";
import type { InsightItem } from "../../pages/report/types";

type ReportInsightListProps = {
  title: string;
  items: InsightItem[];
};

export function ReportInsightList({ title, items }: ReportInsightListProps) {
  return (
    <View className="report-card">
      <View className="report-card__header">
        <Text className="report-card__title">{title}</Text>
      </View>
      <View className="insight-list">
        {items.map((item) => (
          <View className="insight-card" key={item.title}>
            <View className={`insight-card__tone insight-card__tone--${item.tone}`} />
            <View className="insight-card__content">
              <Text className="insight-card__title">{item.title}</Text>
              <Text className="insight-card__body">{item.body}</Text>
            </View>
          </View>
        ))}
      </View>
    </View>
  );
}