"use client";

import { Lightbulb } from "lucide-react";
import { Card, CardHeader, CardContent } from "@/components/ui/card";

export function Insights({ items, period }: { items: string[]; period: string }) {
  return (
    <Card>
      <CardHeader title={<span className="flex items-center gap-2"><Lightbulb className="size-4 text-gold-500" /> Smart insights</span>} description={`Computed from your real data · ${period}`} />
      <CardContent>
        {items.length === 0 ? (
          <p className="text-sm text-fg-muted">Not enough data in this period to surface reliable insights yet.</p>
        ) : (
          <ul className="space-y-2">
            {items.map((t, i) => (
              <li key={i} className="flex gap-3 rounded-lg bg-surface-2 p-3 text-sm leading-snug" style={{ animation: `slide-up 0.3s var(--ease-out-expo) ${i * 60}ms both` }}>
                <span className="mt-1.5 size-1.5 shrink-0 rounded-full bg-primary" />
                <span>{t}</span>
              </li>
            ))}
          </ul>
        )}
      </CardContent>
    </Card>
  );
}