"use client";

import type { QuickRepliesBlock, QuickReplyOption } from "@/lib/chat/types";
import { useChatBlocks } from "../ChatBlockContext";

export default function QuickReplies({ block }: { block: QuickRepliesBlock }) {
  const { sendAction, sendText, busy } = useChatBlocks();
  const options = Array.isArray(block.options)
    ? block.options.filter((o): o is QuickReplyOption => !!o && typeof o.label === "string" && !!(o.action || o.message))
    : [];
  if (options.length === 0) return null;

  const choose = (option: QuickReplyOption) => {
    if (option.action && typeof option.action.type === "string") {
      void sendAction(option.action, { echo: option.label });
    } else if (option.message) {
      void sendText(option.message);
    }
  };

  return (
    <div className="flex flex-wrap gap-1.5">
      {options.map((option, i) => (
        <button
          key={`${option.label}-${i}`}
          type="button"
          disabled={busy}
          onClick={() => choose(option)}
          className="rounded-full border border-red-200 bg-red-50 px-3 py-1.5 text-left text-[11px] font-medium text-[#A50E0E] transition-colors hover:bg-red-100 disabled:cursor-not-allowed disabled:opacity-60"
        >
          {option.label}
        </button>
      ))}
    </div>
  );
}