// src/components/content/overview/content-upcoming.tsx
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import type { ContentOverview } from "@/lib/content/overview";
import { CONTENT_STATUS_LABEL } from "@/lib/content/types";

export function ContentUpcoming({ ov }: { ov: ContentOverview }) {
  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-sm">Prochaines échéances</CardTitle>
      </CardHeader>
      <CardContent>
        {ov.upcoming.length === 0 ? (
          <p className="text-muted-foreground text-sm">Aucune échéance.</p>
        ) : (
          <ul className="space-y-1.5 text-sm">
            {ov.upcoming.map((u) => (
              <li
                key={u.id}
                className="flex items-center justify-between gap-2"
              >
                <span className="truncate">{u.title}</span>
                <span className="flex shrink-0 items-center gap-2 text-xs">
                  <span className="text-muted-foreground">
                    {CONTENT_STATUS_LABEL[u.status]}
                  </span>
                  <span
                    className={
                      u.overdue ? "text-destructive" : "text-muted-foreground"
                    }
                  >
                    {u.dueDate.slice(0, 10)}
                  </span>
                </span>
              </li>
            ))}
          </ul>
        )}
      </CardContent>
    </Card>
  );
}