import { Text, View } from "@tarojs/components";
import type { ClarificationOption } from "../types";
import "./clarification_card.scss";

interface ClarificationCardProps {
  question: string;
  options: ClarificationOption[];
  onSelect: (action: string) => void;
}

export function ClarificationCard({ question, options, onSelect }: ClarificationCardProps) {
  return (
    <View className="clarification-card">
      <View className="clarification-card__head">
        <Text className="clarification-card__eyebrow">需要你确认一下</Text>
        <Text className="clarification-card__question">{question}</Text>
      </View>
      <View className="clarification-card__options">
        {options.map((option) => (
          <View
            key={`${option.index}-${option.action}`}
            className={"clarification-card__option " + (option.freeInput ? "is-free" : "")}
            onClick={() => onSelect(option.action)}
          >
            <Text className="clarification-card__number">{option.index}</Text>
            <View className="clarification-card__copy">
              <Text className="clarification-card__label">{option.label}</Text>
              {option.description ? (
                <Text className="clarification-card__desc">{option.description}</Text>
              ) : null}
            </View>
          </View>
        ))}
      </View>
    </View>
  );
}
