import './blocks.css';

export interface QuoteBlockProps {
  quote: string;
  author?: string;
  role?: string;
  company?: string;
  avatarUrl?: string;
  variant?: 'default' | 'large' | 'minimal' | 'card';
  align?: 'left' | 'center' | 'right';
}

export function QuoteBlock({ 
  quote, 
  author,
  role,
  company,
  avatarUrl,
  variant = 'default',
  align = 'left'
}: QuoteBlockProps) {
  return (
    <section className={`shared-quote-block shared-quote-block--${variant}`}>
      <blockquote 
        className="shared-quote-block__quote"
        style={{ textAlign: align }}
      >
        {quote}
      </blockquote>
      {author && (
        <div className="shared-quote-block__author">
          {avatarUrl && (
            <img 
              src={avatarUrl} 
              alt={author} 
              className="shared-quote-block__avatar" 
            />
          )}
          <div>
            <p className="shared-quote-block__author-name">{author}</p>
            {role && (
              <p className="shared-quote-block__author-role">
                {role}
                {company && ` at ${company}`}
              </p>
            )}
          </div>
        </div>
      )}
    </section>
  );
}

