"use client";

import { ReferenceIcon } from "@/components/lovart/reference-icon";

type CanvasComposerPromoProps = {
  text: string;
  onDismiss: () => void;
  onActivate?: () => void;
};

export function CanvasComposerPromo({
  text,
  onDismiss,
  onActivate,
}: CanvasComposerPromoProps) {
  return (
    <div className="lovart-chat-promo lovart-chat-promo-connected">
      <div className="lovart-chat-promo-surface">
        <div className="lovart-chat-promo-row">
          <button
            type="button"
            className="lovart-chat-promo-message"
            onClick={onActivate}
            disabled={!onActivate}
            title={text}
          >
            <svg
              aria-hidden="true"
              width="16"
              height="18"
              viewBox="0 0 24 28"
              className="lovart-chat-promo-badge"
            >
              <path d="M10 1.15a4 4 0 0 1 4 0l8 4.6a4 4 0 0 1 2 3.46v9.58a4 4 0 0 1-2 3.46l-8 4.6a4 4 0 0 1-4 0l-8-4.6A4 4 0 0 1 0 18.79V9.21a4 4 0 0 1 2-3.46Z" fill="#ddef65" />
              <path
                d="M12 5.5c1.2 5.3 2.2 6.3 7.5 7.5-5.3 1.2-6.3 2.2-7.5 7.5C10.8 15.2 9.8 14.2 4.5 13c5.3-1.2 6.3-2.2 7.5-7.5Z"
                fill="#111"
              />
            </svg>
            <span>{text}</span>
          </button>
          <button
            type="button"
            className="lovart-chat-promo-close"
            aria-label="关闭优惠广告"
            onClick={onDismiss}
          >
            <ReferenceIcon name="close" size={18} />
          </button>
        </div>
      </div>
    </div>
  );
}