import { formatDistanceToNow } from 'date-fns';
import type { Task } from '@/lib/types';
import { StatusPill } from '@/components/ui/status-pill';

type TaskFeedProps = {
  tasks: Task[];
};

const taskLabels: Record<Task['task_type'], string> = {
  sync_filings: 'Sync filings',
  refresh_prices: 'Refresh prices',
  analyze_filing: 'Analyze filing',
  portfolio_insights: 'Portfolio insights'
};

export function TaskFeed({ tasks }: TaskFeedProps) {
  if (tasks.length === 0) {
    return <p className="text-sm text-[color:var(--terminal-muted)]">No recent tasks.</p>;
  }

  return (
    <ul className="space-y-2">
      {tasks.slice(0, 8).map((task) => (
        <li key={task.id} className="flex items-center justify-between rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2">
          <div>
            <p className="text-sm text-[color:var(--terminal-bright)]">{taskLabels[task.task_type]}</p>
            <p className="text-xs text-[color:var(--terminal-muted)]">
              {formatDistanceToNow(new Date(task.created_at), { addSuffix: true })}
            </p>
          </div>
          <StatusPill status={task.status} />
        </li>
      ))}
    </ul>
  );
}