import React from 'react';
import type { SilverBullet } from '../types';

interface Step5SilverBulletsProps {
    silver_bullets: SilverBullet[];
    t: any;
}

const Step5SilverBullets: React.FC<Step5SilverBulletsProps> = ({ silver_bullets, t }) => {
    if (!silver_bullets || silver_bullets.length === 0) {
        return (
            <div>
                <h2 className="text-2xl font-bold mb-4">{t.title}</h2>
                <p className="text-light-subtle dark:text-brand-light">{t.generating}</p>
            </div>
        );
    }

    return (
        <div>
            <h2 className="text-2xl font-bold mb-4">{t.title}</h2>
            <p className="text-light-subtle dark:text-brand-light mb-6">
                {t.subtitle}
            </p>

            <div className="space-y-4">
                {silver_bullets.map((bullet, index) => (
                    <div key={index} className="bg-light-secondary dark:bg-brand-secondary p-6 rounded-lg shadow-lg">
                         <h3 className="text-lg font-semibold text-light-text dark:text-white mb-2">
                            {t.cardTitle} <span className="text-brand-highlight">{bullet.competitor_name}</span>
                        </h3>
                        <blockquote className="border-l-4 border-brand-highlight pl-4">
                            <p className="text-lg italic text-light-subtle dark:text-brand-light">
                                "{bullet.statement}"
                            </p>
                        </blockquote>
                    </div>
                ))}
            </div>
        </div>
    );
};

export default Step5SilverBullets;