"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Sparkles, LineChart } from 'lucide-react'
import type { ReportItem } from "@/types/ai-assistant"

export default function ReportCards({ items }: { items: ReportItem[] }) {
  return (
    <section className="space-y-3 mt-4">
      {items.map((it) => (
        <Card key={it.id} className="shadow-sm">
          <CardHeader className="pb-2">
            <CardTitle className="text-base flex items-center justify-between">
              <span className="line-clamp-1">{it.title}</span>
              <Badge variant="secondary" className="ml-2 shrink-0">
                <LineChart className="h-3.5 w-3.5 mr-1" />
                分析
              </Badge>
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-2">
            <p className="text-xs text-muted-foreground">{it.source}</p>
            <p className="text-sm leading-relaxed">{it.description}</p>
            <div className="flex items-center justify-between pt-1">
              <span className="text-[11px] text-muted-foreground">
                更新时间：{new Date(it.updatedAt).toLocaleString("zh-CN")}
              </span>
              <Button size="sm" variant="outline" className="h-8">
                <Sparkles className="h-4 w-4 mr-1" />
                生成
              </Button>
            </div>
          </CardContent>
        </Card>
      ))}
    </section>
  )
}
