import { FileText } from 'lucide-react';

import { HANDBOOK_IMAGE } from '@/shared/constants/appData';

interface PoliciesHeroProps {
  readonly totalCount: number;
  readonly acknowledgedCount: number;
}

export function PoliciesHero({ totalCount, acknowledgedCount }: PoliciesHeroProps) {
  return (
    <div className="relative overflow-hidden rounded-2xl h-48 md:h-56">
      <img src={HANDBOOK_IMAGE} alt="Handbook" className="w-full h-full object-cover" />
      <div className="absolute inset-0 bg-gradient-to-r from-slate-900/90 via-slate-800/80 to-slate-900/60" />
      <div className="absolute inset-0 flex items-center px-6 md:px-8">
        <div>
          <div className="flex items-center gap-3 mb-3">
            <div className="w-12 h-12 rounded-xl bg-white/10 backdrop-blur-sm border border-white/20 flex items-center justify-center">
              <FileText size={24} className="text-white" />
            </div>
            <div>
              <h2 className="text-2xl md:text-3xl font-bold text-white">Handbook & Policies</h2>
              <p className="text-sm text-slate-300">Campus policies, procedures, and expectations - always accessible</p>
            </div>
          </div>
          <div className="flex items-center gap-4 mt-4">
            <div className="bg-white/10 backdrop-blur-sm rounded-lg px-3 py-1.5 border border-white/10">
              <span className="text-xs text-slate-300">{totalCount} Policies</span>
            </div>
            <div className="bg-emerald-500/20 backdrop-blur-sm rounded-lg px-3 py-1.5 border border-emerald-400/20">
              <span className="text-xs text-emerald-300">{acknowledgedCount}/{totalCount} Acknowledged</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
