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
  description?: string; // Optional description for the section
}

export function TrustSection({ items, title, description, className, ...props }: TrustSectionProps) {
  return (
    <div className={cn('w-full', className)} {...props}>
      <div className="max-w-6xl mx-auto">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start">
          <div className="space-y-6">
            {title && <h2 className="text-4xl font-bold">{title}</h2>}
            {description && <p className="text-xl text-muted-foreground">{description}</p>}
          </div>
          <div className="grid grid-cols-2 gap-6">
            {items.map((item, index) => (
              <div 
                key={index} 
                className="flex flex-col items-center text-center space-y-4 p-6 rounded-lg border border-muted bg-background transition-all duration-300 hover:border-foreground/20"
              >
                <div className="flex items-center justify-center w-12 h-12 rounded-full bg-muted/50 text-primary">
                  {item.icon}
                </div>
                <p className="text-base text-muted-foreground">{item.text}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}
