import React from 'react';
import { ScrollView } from 'react-native';
import { HistoryCard } from './HistoryCard';

export function HistoryCardExample() {
  const mockData = [
    {
      templateName: 'AI视频生成模板',
      createdAt: new Date(Date.now() - 30 * 60 * 1000).toISOString(),
      preview: '生成了一个关于科技产品的宣传视频...',
      status: 'completed' as const,
    },
    {
      templateName: '图片处理模板',
      createdAt: new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString(),
      status: 'running' as const,
    },
    {
      templateName: '文本摘要模板',
      createdAt: new Date(Date.now() - 5 * 60 * 60 * 1000).toISOString(),
      preview: '对长篇文章进行了智能摘要，提取了核心观点和关键信息...',
      status: 'failed' as const,
    },
  ];

  const handleView = (index: number) => {
    // View details
  };

  const handleDelete = (index: number) => {
    // Delete item
  };

  return (
    <ScrollView style={{ flex: 1 }}>
      {mockData.map((item, index) => (
        <HistoryCard
          key={index}
          templateName={item.templateName}
          createdAt={item.createdAt}
          preview={item.preview}
          status={item.status}
          onView={() => handleView(index)}
          onDelete={() => handleDelete(index)}
        />
      ))}
    </ScrollView>
  );
}