import { avatarColor, initials } from '@/lib/roles';

type Props = {
  schoolName: string;
  schoolLogoUrl: string | null;
  academicYear: string | null;
  action?: React.ReactNode;
};

/** سربرگ کارنامه — لوگو/نام مدرسه + سال تحصیلی + دکمه‌ی عملیات (دانلود PDF). */
export function ReportCardHeader({ schoolName, schoolLogoUrl, academicYear, action }: Props) {
  return (
    <section className="rc-header">
      <div className="rc-header-brand">
        <div className="rc-header-logo">
          {schoolLogoUrl ? (
            <img src={schoolLogoUrl} alt={schoolName} />
          ) : (
            <span style={{ background: avatarColor(schoolName) }}>{initials(schoolName)}</span>
          )}
        </div>
        <div>
          <h2 className="rc-header-title">
            <i className="bi bi-file-earmark-bar-graph" aria-hidden="true" />
            کارنامه تحصیلی
          </h2>
          <p className="rc-header-sub">
            {schoolName}
            {academicYear ? ` — سال تحصیلی ${academicYear}` : ''}
          </p>
        </div>
      </div>
      {action && <div className="rc-header-action">{action}</div>}
    </section>
  );
}