import { Database, HandMetal } from 'lucide-react';

import { ModuleHeader } from '@/components/ui/module-header';

export function SignLanguageHeader() {
  return (
    <ModuleHeader
      title="Basic Sign Language"
      description={(
        <span className="flex items-center gap-2">
          Functional signs for non-verbal communication. Select any sign to watch the demonstration.
          <span className="inline-flex items-center gap-1 px-2 py-0.5 bg-emerald-100 text-emerald-700 rounded-lg text-[10px] font-semibold">
            <Database size={10} />
            Progress Saved
          </span>
        </span>
      )}
      icon={HandMetal}
      iconClassName="bg-gradient-to-br from-indigo-400 to-indigo-600"
      titleClassName="text-gray-800"
      descriptionClassName="text-gray-500"
    />
  );
}
