import { Globe, Handshake } from 'lucide-react';
import { ModuleHeader } from '@/components/ui/module-header';

export function CommunityServiceHeader() {
  return (
    <>
      <ModuleHeader
        title="Community Service & School Partnerships"
        description="Discover local organizations for community service projects and school partnership opportunities"
        icon={Globe}
        iconClassName="bg-gradient-to-br from-green-400 to-emerald-600"
        iconShadowClassName="shadow-green-500/30"
      />

      <div className="bg-gradient-to-r from-green-500/10 via-emerald-500/10 to-teal-500/10 rounded-2xl border border-green-500/20 p-5">
        <div className="flex items-start gap-4">
          <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-green-400 to-emerald-500 flex items-center justify-center flex-shrink-0 shadow-lg shadow-green-500/30">
            <Handshake size={22} className="text-white" />
          </div>
          <div>
            <h3 className="font-bold text-green-400 text-sm uppercase tracking-wider">Building Community Connections</h3>
            <p className="text-slate-300 text-sm mt-1 leading-relaxed">
              Explore local organizations that welcome school partnerships and community service projects. These opportunities help students develop social skills, build confidence, and contribute meaningfully to their community.
            </p>
          </div>
        </div>
      </div>
    </>
  );
}
