OpenFlare/frontend/app/(main)/nodes/components/node-detail-primitives.tsx

'use client';

import type {ReactNode} from 'react';
import type {LucideIcon} from 'lucide-react';

import {Card, CardContent, CardDescription, CardHeader, CardTitle} from '@/components/ui/card';
import {cn} from '@/lib/utils';

export function NodeInfoRow({
  label,
  children,
  className,
}: {
  label: string;
  children: ReactNode;
  className?: string;
}) {
  return (
    <div className={cn('flex items-start justify-between gap-4 py-2.5 text-sm', className)}>
      <span className="shrink-0 text-muted-foreground">{label}</span>
      <div className="min-w-0 text-right font-medium">{children}</div>
    </div>
  );
}

export function NodeKpiCard({
  label,
  value,
  icon: Icon,
}: {
  label: string;
  value: ReactNode;
  icon?: LucideIcon;
}) {
  return (
    <div className="rounded-xl border bg-card/60 px-4 py-3.5 backdrop-blur-sm">
      <div className="flex items-center gap-2 text-xs text-muted-foreground">
        {Icon ? <Icon className="size-3.5 opacity-70" /> : null}
        <span>{label}</span>
      </div>
      <p className="mt-2 text-sm font-semibold tracking-tight break-all">{value}</p>
    </div>
  );
}

export function NodeSectionCard({
  title,
  description,
  action,
  children,
  className,
}: {
  title: string;
  description?: string;
  action?: React.ReactNode;
  children: ReactNode;
  className?: string;
}) {
  return (
    <Card className={cn('border shadow-none', className)}>
      <CardHeader className={cn('pb-3', action ? 'flex-row items-start justify-between space-y-0' : '')}>
        <div className="space-y-1">
          <CardTitle className="text-base font-semibold">{title}</CardTitle>
          {description ? <CardDescription>{description}</CardDescription> : null}
        </div>
        {action}
      </CardHeader>
      <CardContent>{children}</CardContent>
    </Card>
  );
}

export function NodeErrorBanner({ message }: { message: string }) {
  return (
    <div className="rounded-xl border border-destructive/25 bg-destructive/5 px-4 py-3 text-sm text-destructive">
      {message}
    </div>
  );
}