---
interface Props {
  quote: string;
  author?: string;
  author_title?: string;
  author_image?: string;
  style?: 'simple' | 'card' | 'large';
}

const { 
  quote, 
  author, 
  author_title,
  author_image,
  style = 'card'
} = Astro.props;
---

{style === 'large' ? (
  <section class="bg-gradient-to-br from-gray-900 to-gray-800 py-20 my-12">
    <div class="max-w-4xl mx-auto px-6 text-center">
      <svg class="w-12 h-12 text-primary/50 mx-auto mb-6" fill="currentColor" viewBox="0 0 24 24">
        <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"/>
      </svg>
      
      <blockquote class="text-2xl md:text-4xl font-medium text-white leading-relaxed mb-8">
        "{quote}"
      </blockquote>
      
      {author && (
        <div class="flex items-center justify-center gap-4">
          {author_image && (
            <img 
              src={author_image} 
              alt={author}
              class="w-16 h-16 rounded-full object-cover border-2 border-primary"
            />
          )}
          <div class="text-left">
            <div class="text-white font-semibold text-lg">{author}</div>
            {author_title && (
              <div class="text-gray-400">{author_title}</div>
            )}
          </div>
        </div>
      )}
    </div>
  </section>
) : style === 'card' ? (
  <div class="max-w-3xl mx-auto my-12 px-6">
    <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-8 border-l-4 border-primary">
      <blockquote class="text-xl text-gray-700 dark:text-gray-300 leading-relaxed italic mb-6">
        "{quote}"
      </blockquote>
      
      {author && (
        <div class="flex items-center gap-4">
          {author_image && (
            <img 
              src={author_image} 
              alt={author}
              class="w-12 h-12 rounded-full object-cover"
            />
          )}
          <div>
            <div class="font-semibold text-gray-900 dark:text-white">{author}</div>
            {author_title && (
              <div class="text-sm text-gray-500 dark:text-gray-400">{author_title}</div>
            )}
          </div>
        </div>
      )}
    </div>
  </div>
) : (
  <blockquote class="max-w-3xl mx-auto my-12 px-6 border-l-4 border-primary pl-6">
    <p class="text-2xl text-gray-700 dark:text-gray-300 italic leading-relaxed">
      "{quote}"
    </p>
    {author && (
      <footer class="mt-4 text-gray-600 dark:text-gray-400">
        — {author}{author_title && `, ${author_title}`}
      </footer>
    )}
  </blockquote>
)}
