'use client';

import { Card } from '@/components/ui/card';
import { MessageSquare } from 'lucide-react';

export function MessageTemplateInfo() {
  return (
    <Card className="p-4 bg-blue-50 border-blue-200">
      <h4 className="text-blue-900 mb-2">
        <MessageSquare className="w-4 h-4 inline mr-2" />
        消息模版说明
      </h4>
      <ul className="space-y-1 text-sm text-blue-800">
        <li>• 支持短信、邮件、站内信、推送四种消息类型</li>
        <li>• 使用 {'{{变量名}}'} 语法嵌入动态变量，系统会自动提取</li>
        <li>• 可以发送测试消息验证模板效果</li>
        <li>• 模板支持导入导出，便于跨环境迁移</li>
        <li>• 停用的模板不会被系统使用</li>
      </ul>
    </Card>
  );
}