import { Heart } from 'lucide-react';

import type { SignLanguagePageContent } from '@/shared/types/app';

interface SignLanguageRememberPanelProps {
  readonly content: SignLanguagePageContent;
}

export function SignLanguageRememberPanel({ content }: SignLanguageRememberPanelProps) {
  if (!content.rememberTitle || !content.rememberDescription) {
    return null;
  }

  return (
    <section className="bg-gradient-to-r from-indigo-50 to-violet-50 rounded-2xl border border-indigo-200 p-5">
      <h3 className="font-bold text-indigo-800 mb-2 flex items-center gap-2">
        <Heart size={16} />
        {content.rememberTitle}
      </h3>
      <p className="text-sm text-indigo-700">{content.rememberDescription}</p>
    </section>
  );
}
