import * as React from 'react';
import { cn } from '../../shared/utils';

export interface ComplianceBadge {
  icon: React.ReactNode;
  label: string;
  description?: string;
}

export interface ComplianceBadgeRowProps extends React.HTMLAttributes<HTMLDivElement> {
  badges: ComplianceBadge[];
}

/**
 * A row of certification/compliance badges (e.g. SOC 2, GDPR, WCAG 2.1 AA).
 *
 * @description
 * Renders a left-aligned grid where each badge pairs a token-radius outlined
 * icon chip with a label and an optional short description, built entirely
 * from theme tokens so it reskins across all Xertica-ui themes and dark mode.
 *
 * @ai-rules
 * 1. Provide `badges` as `{ icon, label, description? }` — `icon` should be a small lucide-react element.
 * 2. Keep `label` and `description` short — badges sit in a `grid-cols-2 sm:grid-cols-4` layout, so each column has limited width.
 * 3. Do not hand-roll badge styling elsewhere — this component owns the icon-chip/label/description layout.
 */
export function ComplianceBadgeRow({ badges, className, ...props }: ComplianceBadgeRowProps) {
  return (
    <div
      className={cn('grid grid-cols-2 gap-x-8 gap-y-10 sm:grid-cols-4', className)}
      {...props}
    >
      {badges.map((badge, index) => (
        <div
          key={`${badge.label}-${index}`}
          className="flex flex-col items-start gap-3 text-left"
        >
          <div className="flex items-center justify-center rounded-[var(--radius)] border border-border bg-background p-3 [&>svg]:size-6">
            {badge.icon}
          </div>
          <p className="text-sm font-medium text-foreground">{badge.label}</p>
          {badge.description && (
            <p className="text-xs text-muted-foreground">{badge.description}</p>
          )}
        </div>
      ))}
    </div>
  );
}