export function EducationCard({ title, content, tips }: { title: string; content: string; tips: string[] }) {
  return (
    <div className="bg-white rounded-xl shadow-lg p-6">
      <h2 className="text-xl font-bold text-gray-900 mb-4">{title}</h2>
      <div className="prose prose-sm max-w-none mb-6">
        {content.split('\n\n').map((paragraph, i) => (
          <p key={i} className="text-gray-700 whitespace-pre-line mb-3">
            {paragraph.split('**').map((part, j) =>
              j % 2 === 1 ? <strong key={j}>{part}</strong> : part
            )}
          </p>
        ))}
      </div>
      <div className="bg-indigo-50 rounded-lg p-4">
        <h3 className="text-sm font-semibold text-indigo-800 mb-2">Tipps:</h3>
        <ul className="space-y-1">
          {tips.map((tip, i) => (
            <li key={i} className="flex items-start gap-2 text-sm text-indigo-700">
              <span className="text-indigo-500 mt-0.5">•</span>
              {tip}
            </li>
          ))}
        </ul>
      </div>
    </div>
  )
}
