story-generator/src/components/ui/info-card.tsx

import React from 'react';
import { LucideIcon } from 'lucide-react';

interface InfoCardProps {
  title: string;
  description?: string;
  result?: string;
  icon?: LucideIcon;
  items?: string[];
  bgColor?: string;
  titleColor?: string;
  textColor?: string;
  resultColor?: string;
  iconColor?: string;
}

export function InfoCard({
  title,
  description,
  result,
  icon: Icon,
  items,
  bgColor = 'bg-white',
  titleColor = 'text-gray-900',
  textColor = 'text-gray-600',
  resultColor = 'text-purple-600',
  iconColor = 'text-purple-600',
}: InfoCardProps) {
  return (
    <div className={`${bgColor} p-8 rounded-2xl shadow-sm`}>
      {/* Icon */}
      {Icon && (
        <div className="mb-6">
          <div className="w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center">
            <Icon className={`w-8 h-8 ${iconColor}`} />
          </div>
        </div>
      )}

      {/* Title */}
      <h3 className={`text-2xl font-bold ${titleColor} mb-3`}>{title}</h3>

      {/* Description */}
      {description && (
        <p className={`${textColor} text-lg mb-6`}>{description}</p>
      )}

      {/* Result */}
      {result && (
        <div className="bg-purple-50 rounded-xl p-4">
          <p className={`${resultColor} text-lg font-medium`}>
            Resultado: {result}
          </p>
        </div>
      )}

      {/* Items List */}
      {items && items.length > 0 && (
        <ul className={`list-disc pl-6 space-y-2 mt-6 ${textColor}`}>
          {items.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>
      )}
    </div>
  );
}