'use client'

import type { EducationContent } from './types'

interface EducationCardProps {
  content: EducationContent | undefined
}

export function EducationCard({ content }: EducationCardProps) {
  if (!content) return null

  return (
    <div className="bg-blue-50 border border-blue-200 rounded-lg p-6 mb-6">
      <h3 className="text-lg font-semibold text-blue-800 mb-4 flex items-center">
        <span className="mr-2">💡</span>
        Warum ist das wichtig?
      </h3>
      <h4 className="text-md font-medium text-blue-700 mb-3">{content.title}</h4>
      <div className="space-y-2 text-blue-900">
        {content.content.map((line, index) => (
          <p key={index} className={line.startsWith('•') ? 'ml-4' : ''}>
            {line}
          </p>
        ))}
      </div>
    </div>
  )
}