import StatusDot from '@/components/admin/StatusDot';
import type { SystemStatusItem } from '@/types/admin';

export default function SystemStatusCard({
    systemStatus,
}: {
    systemStatus: SystemStatusItem[];
}) {
    return (
        <div className="pf-glass flex-1 p-5">
            <p className="text-foreground mb-3 text-sm font-semibold">
                System Status
            </p>
            <div className="space-y-3">
                {systemStatus.map((s) => (
                    <div key={s.label} className="flex items-start gap-3">
                        <StatusDot status={s.status} />
                        <div className="min-w-0 flex-1">
                            <p className="text-foreground/80 text-xs font-medium">
                                {s.label}
                            </p>
                            <p className="text-muted-foreground dark:text-muted-foreground/65 text-[11px]">
                                {s.detail}
                            </p>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
}