import type { ReactNode } from 'react';
import './blocks.css';

export interface TestimonialItem {
  quote: string;
  author: string;
  role?: string;
  company?: string;
  avatarUrl?: string;
  rating?: number;
}

export interface TestimonialsBlockProps {
  title?: string;
  subtitle?: string;
  testimonials: TestimonialItem[];
  columns?: 1 | 2 | 3;
  variant?: 'default' | 'card' | 'minimal';
}

export function TestimonialsBlock({ 
  title, 
  subtitle, 
  testimonials, 
  columns = 3,
  variant = 'default' 
}: TestimonialsBlockProps) {
  return (
    <section className={`shared-testimonials shared-testimonials--${variant}`}>
      {title && <h2 className="shared-testimonials__title">{title}</h2>}
      {subtitle && <p className="shared-testimonials__subtitle">{subtitle}</p>}
      <div className={`shared-testimonials__grid shared-testimonials__grid--${columns}`}>
        {testimonials.map((testimonial, index) => (
          <div key={index} className="shared-testimonials__item">
            {testimonial.rating && (
              <div className="shared-testimonials__rating">
                {'★'.repeat(testimonial.rating)}
              </div>
            )}
            <blockquote className="shared-testimonials__quote">
              {testimonial.quote}
            </blockquote>
            <div className="shared-testimonials__author">
              {testimonial.avatarUrl && (
                <img 
                  src={testimonial.avatarUrl} 
                  alt={testimonial.author} 
                  className="shared-testimonials__avatar" 
                />
              )}
              <div>
                <p className="shared-testimonials__author-name">{testimonial.author}</p>
                {testimonial.role && (
                  <p className="shared-testimonials__author-role">
                    {testimonial.role}
                    {testimonial.company && ` at ${testimonial.company}`}
                  </p>
                )}
              </div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

