helix-engage/src/components/leads/followup-widget.tsx

import { Button } from "@/components/base/buttons/button";
import { formatShortDate } from "@/lib/format";
import type { FollowUp } from "@/types/entities";
import { cx } from "@/utils/cx";

interface FollowupWidgetProps {
    overdue: FollowUp[];
    upcoming: FollowUp[];
}

export const FollowupWidget = ({ overdue, upcoming }: FollowupWidgetProps) => {
    const items = [...overdue, ...upcoming].slice(0, 4);

    if (items.length === 0) {
        return null;
    }

    return (
        <div>
            <h3 className="mb-3 text-sm font-bold text-primary">Upcoming Follow-ups</h3>
            <div className="space-y-2">
                {items.map((item) => {
                    const isOverdue = overdue.some((o) => o.id === item.id);

                    return (
                        <div
                            key={item.id}
                            className={cx(
                                "rounded-lg border-l-2 p-3",
                                isOverdue ? "border-l-error-solid bg-error-primary" : "border-l-brand-solid bg-secondary",
                            )}
                        >
                            <p className={cx("text-xs font-semibold", isOverdue ? "text-error-primary" : "text-brand-secondary")}>
                                {item.scheduledAt ? formatShortDate(item.scheduledAt) : "No date"}
                                {isOverdue && " — Overdue"}
                            </p>
                            <p className="mt-0.5 text-xs font-medium text-primary">{item.description ?? item.followUpType ?? "Follow-up"}</p>
                            {(item.patientName || item.patientPhone) && (
                                <p className="mt-0.5 text-xs text-tertiary">
                                    {item.patientName}
                                    {item.patientPhone && ` · ${item.patientPhone}`}
                                </p>
                            )}
                        </div>
                    );
                })}
            </div>
            <Button className="mt-3 w-full" size="sm" color="secondary">
                Open Full Schedule
            </Button>
        </div>
    );
};