AI Summarizer Card

"use client";

import React from "react";
import { FileText, List, Target, Hash } from "lucide-react";

export default function AISummarizerCard() {
    const points = [
        "Q3 Revenue grew by 12.4% beating analyst estimates.",
        "Cloud infrastructure costs optimized by $2.4M through auto-scaling.",
        "New AI-powered search increased conversion by 18% on mobile.",
        "Projected growth for Q4 remains bullish at 8-10%."
    ];

    return (
        <div className="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-6 shadow-sm w-full max-w-md mx-auto">
            <div className="flex items-center gap-3 mb-8">
                <div className="p-2.5 rounded-xl bg-amber-500/10 text-amber-600">
                    <FileText className="h-5 w-5" />
                </div>
                <div>
                    <h3 className="text-sm font-bold text-zinc-900 dark:text-zinc-100">Smart Summary</h3>
                    <p className="text-[10px] text-zinc-500 font-medium">quarterly_report_v2.pdf</p>
                </div>
            </div>

            <div className="grid grid-cols-2 gap-2 mb-8">
                <div className="p-3 rounded-xl border border-zinc-100 dark:border-zinc-800 bg-zinc-50/50 dark:bg-zinc-900/50">
                    <div className="flex items-center gap-1.5 text-zinc-400 mb-1">
                        <Target className="h-3 w-3" />
                        <span className="text-[9px] font-black uppercase tracking-widest">Sentiment</span>
                    </div>
                    <p className="text-xs font-bold text-zinc-900 dark:text-zinc-100">Highly Positive</p>
                </div>
                <div className="p-3 rounded-xl border border-zinc-100 dark:border-zinc-800 bg-zinc-50/50 dark:bg-zinc-900/50">
                    <div className="flex items-center gap-1.5 text-zinc-400 mb-1">
                        <Hash className="h-3 w-3" />
                        <span className="text-[9px] font-black uppercase tracking-widest">Confidence</span>
                    </div>
                    <p className="text-xs font-bold text-zinc-900 dark:text-zinc-100">98% Match</p>
                </div>
            </div>

            <div className="space-y-3">
                <p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest flex items-center gap-2">
                    <List className="h-3 w-3" />
                    Key Takeaways
                </p>
                {points.map((p, i) => (
                    <div key={i} className="flex gap-3 items-start group">
                        <div className="h-1.5 w-1.5 rounded-full bg-amber-500 mt-1.5 shrink-0 group-hover:scale-125 transition-transform" />
                        <p className="text-xs text-zinc-600 dark:text-zinc-400 leading-relaxed font-medium">{p}</p>
                    </div>
                ))}
            </div>
        </div>
    );
}