import { AlertTriangle } from 'lucide-react';
import { useTranslation } from 'react-i18next';

type Props = {
  className?: string;
};

export default function GeneralNotice({ className }: Props) {
  const { t } = useTranslation('common');

  return (
    <div className={className ?? 'mt-8 rounded-md border border-amber-200 bg-amber-50/80 p-4'}>
      <div className="flex items-start gap-3">
        <AlertTriangle className="w-6 h-6 text-amber-600 mt-0.5 flex-shrink-0" />
        <div className="text-base text-amber-800 leading-relaxed">
          <h4 className="font-semibold mb-2">{t('generalNotice.title', 'Wichtiger Hinweis:')}</h4>
          <p>
            {t(
              'generalNotice.text',
              'Die auf diesen Seiten enthaltenen Tipps und Informationen stellen allgemeine, unverbindliche Hinweise zu Versicherungen dar. Es handelt sich um eine private Meinungsäußerung ohne Anspruch auf Richtigkeit, Vollständigkeit oder Haftung und ersetzt keine individuelle Beratung. Maßgeblich sind ausschließlich die jeweiligen Versicherungsbedingungen des Versicherungsunternehmens.'
            )}
          </p>
        </div>
      </div>
    </div>
  );
}