Design System

import type { StatusCategory } from '@/lib/design-system/status-color-config';
 
// Mapping von API-Status zu semantischer Kategorie
const INVOICE_STATUS_TO_CATEGORY: Record<string, StatusCategory> = {
  draft: 'neutral',
  sent: 'info',
  paid: 'success',
  overdue: 'error',
  cancelled: 'neutral',
};
 
// Badge-Varianten basierend auf Kategorie
const STATUS_TO_BADGE_VARIANT: Record<StatusCategory, string> = {
  success: 'success',
  warning: 'warning',
  error: 'destructive',
  info: 'default',
  neutral: 'secondary',
};
 
function InvoiceStatusBadge({ status }: { status: string }) {
  const category = INVOICE_STATUS_TO_CATEGORY[status] || 'neutral';
  const variant = STATUS_TO_BADGE_VARIANT[category];
 
  return (
    <Badge variant={variant}>
      {status === 'paid' ? 'Bezahlt' : status}
    </Badge>
  );
}

// Status-Klassen für eigene Komponenten
const STATUS_CLASSES = {
  success: {
    text: 'text-success',
    bg: 'bg-success/10',
    bgSolid: 'bg-success',
    border: 'border-success/30',
  },
  warning: {
    text: 'text-warning',
    bg: 'bg-warning/10',
    bgSolid: 'bg-warning',
    border: 'border-warning/30',
  },
  error: {
    text: 'text-destructive',
    bg: 'bg-destructive/10',
    bgSolid: 'bg-destructive',
    border: 'border-destructive/30',
  },
  info: {
    text: 'text-primary',
    bg: 'bg-primary/10',
    bgSolid: 'bg-primary',
    border: 'border-primary/30',
  },
  neutral: {
    text: 'text-muted-foreground',
    bg: 'bg-muted',
    bgSolid: 'bg-secondary',
    border: 'border-border',
  },
};
 
function HealthIndicator({ status }: { status: 'healthy' | 'degraded' | 'critical' }) {
  const categoryMap = {
    healthy: 'success',
    degraded: 'warning',
    critical: 'error',
  };
 
  const category = categoryMap[status];
  const classes = STATUS_CLASSES[category];
 
  return (
    <div className={`flex items-center gap-2 ${classes.text}`}>
      <span className={`h-2 w-2 rounded-full ${classes.bgSolid}`} />
      <span>{status === 'healthy' ? 'Gesund' : status}</span>
    </div>
  );
}

function StatusCard({ category, title, description }: {
  category: StatusCategory;
  title: string;
  description: string;
}) {
  const classes = STATUS_CLASSES[category];
 
  return (
    <div className={`rounded-lg border p-4 ${classes.bg} ${classes.border}`}>
      <h3 className={`font-semibold ${classes.text}`}>{title}</h3>
      <p className="text-muted-foreground">{description}</p>
    </div>
  );
}

// ❌ FALSCH: Hardcodierte Farben (bricht im Dark Mode)
<span className="text-green-600 dark:text-green-400">Erfolgreich</span>
 
// ✅ RICHTIG: Semantische Token (funktioniert in beiden Modi)
<span className="text-success">Erfolgreich</span>

/* Die semantischen Token passen sich automatisch an */
.status-badge {
  color: hsl(var(--success));           /* Passt sich automatisch an */
  background: hsl(var(--success) / 0.1); /* 10% Opacity */
  border-color: hsl(var(--success) / 0.3); /* 30% Opacity */
}

// Dein eigener Status-Typ
type MyStatus = 'active' | 'pending' | 'failed';
 
// Mapping zu BuchhaltGenie Kategorien
const statusToCategory: Record<MyStatus, StatusCategory> = {
  active: 'success',
  pending: 'warning',
  failed: 'error',
};

.my-custom-badge {
  color: hsl(var(--success));
  background-color: hsl(var(--success) / 0.1);
}

type StatusCategory = 'success' | 'warning' | 'error' | 'info' | 'neutral';