/* eslint-disable @next/next/no-img-element -- External card image URLs; next/image migration is out of scope. */

export default function CardEditorPreview({ formData }) {
  return (
    <div className="sticky top-8">
                <h2 className="text-xl font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
                  Card Preview
                </h2>
                <div className="glass-panel p-6 rounded-xl">
                  <div className="w-full max-w-xs mx-auto">
                    <div 
                      className="w-full rounded-lg overflow-hidden shadow-lg"
                      style={{ aspectRatio: '5/7' }}
                    >
                      {formData.image_url ? (
                        <img 
                          src={formData.image_url} 
                          alt={formData.name}
                          className="w-full h-full object-cover"
                          onError={(e) => {
                            e.target.style.display = 'none';
                            e.target.nextSibling.style.display = 'flex';
                          }}
                        />
                      ) : null}
                      <div 
                        className={`w-full h-full flex items-center justify-center ${formData.image_url ? 'hidden' : 'flex'}`}
                        style={{ backgroundColor: 'var(--bg-primary)' }}
                      >
                        <div className="text-center p-4">
                          <div className="text-4xl mb-2">🃏</div>
                          <div className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>
                            {formData.name || 'Card Name'}
                          </div>
                          <div className="text-xs" style={{ color: 'var(--text-secondary)' }}>
                            {formData.set_name || 'Set Name'}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  
                  <div className="mt-4 text-center">
                    <h3 className="font-bold" style={{ color: 'var(--text-primary)' }}>
                      {formData.name || 'Card Name'}
                    </h3>
                    <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
                      {formData.set_name} • {formData.game}
                    </p>
                    <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
                      {formData.rarity} • {formData.card_type}
                    </p>
                    {formData.current_price && (
                      <p className="text-lg font-bold mt-2 gradient-text-gold">
                        ${parseFloat(formData.current_price).toFixed(2)}
                      </p>
                    )}
                  </div>
                </div>
              </div>
  );
}