import * as React from 'react';

import { cn } from '@workspace/ui/lib/utils';

// Define types for trust items
interface TrustItem {
  icon: React.ReactNode; // Icon component (e.g., from Lucide)
  text: string; // The trust message
}

export interface TrustSectionProps extends React.HTMLAttributes<HTMLDivElement> {
  items: TrustItem[];
  title?: string; // Optional title for the section
}

export function TrustSection({ items, title, className, ...props }: TrustSectionProps) {
  return (
    <div className={cn("w-full", className)} {...props}>
      {title && <h2 className="text-2xl font-bold mb-8 text-center">{title}</h2>}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        {items.map((item, index) => (
          <div key={index} className="flex items-start space-x-3 p-4 rounded-lg border bg-card">
            <div className="mt-0.5 text-primary">
              {item.icon}
            </div>
            <p className="text-sm text-muted-foreground">{item.text}</p>
          </div>
        ))}
      </div>
    </div>
  );
}