import React from 'react';
import { t } from '@/i18n';
// Taro mini-program component

/**
 * AI引导组件（小程序/H5版）
 *
 * type=recommendation: 首页顶部AI推荐标签条
 * type=purchase: 新用户购买引导气泡
 */

interface AiGuideProps {
  type: 'recommendation' | 'purchase';
}

const AiGuide: React.FC<AiGuideProps> = ({ type }) => {
  if (type === 'recommendation') {
    return (
      <scroll-view scrollX className="ai-suggest-bar">
        {[
          { id: 1, text: '星巴克 8.5折' },
          { id: 2, text: 'Nike 限时特价' },
          { id: 3, text: '新品餐饮券' },
          { id: 4, text: '高评级推荐' },
        ].map(s => (
          <view key={s.id} className="ai-tag">
            <text className="ai-tag-icon">✨</text>
            <text className="ai-tag-text">{s.text}</text>
          </view>
        ))}
      </scroll-view>
    );
  }

  // Purchase guide bubble
  return (
    <view className="ai-bubble">
      <view className="ai-bubble-avatar">
        <text className="ai-bubble-avatar-icon">✨</text>
      </view>
      <view className="ai-bubble-content">
        <text className="ai-bubble-text">
          {t('ai_guide_greeting')}
        </text>
      </view>
      <view className="ai-bubble-close">
        <text className="ai-bubble-close-text">×</text>
      </view>
    </view>
  );
};

export default AiGuide;

/*
CSS:

.ai-suggest-bar {
  display: flex; white-space: nowrap;
  padding: 16rpx 32rpx;
}
.ai-tag {
  display: inline-flex; align-items: center;
  padding: 8rpx 20rpx; margin-right: 12rpx;
  background: #F3F1FF; border-radius: 999rpx;
}
.ai-tag-icon { font-size: 24rpx; margin-right: 6rpx; }
.ai-tag-text { font-size: 24rpx; color: #6C5CE7; font-weight: 500; white-space: nowrap; }

.ai-bubble {
  display: flex; align-items: flex-start;
  margin: 16rpx 32rpx; padding: 20rpx;
  background: #F3F1FF; border-radius: 16rpx;
  border: 1rpx solid rgba(108,92,231,0.15);
}
.ai-bubble-avatar {
  width: 48rpx; height: 48rpx;
  background: linear-gradient(135deg, #6C5CE7, #9B8FFF);
  border-radius: 12rpx; display: flex;
  align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ai-bubble-avatar-icon { font-size: 24rpx; }
.ai-bubble-content { flex: 1; margin: 0 16rpx; }
.ai-bubble-text { font-size: 26rpx; color: #5C6478; line-height: 1.5; }
.ai-bubble-close { padding: 4rpx; }
.ai-bubble-close-text { font-size: 28rpx; color: #A0A8BE; }
*/