import { persianDigits } from '@/lib/persianDate';
import type { AttendanceInfo } from '@/lib/reportCard';

/** خلاصه‌ی وضعیت حضور — درصد حضور و تعداد غیبت‌ها. */
export function AttendanceSummary({ attendance }: { attendance: AttendanceInfo }) {
  const rows = [
    { label: 'درصد حضور', value: `${persianDigits(attendance.presentPercent)}٪`, tone: '#0EA678' },
    { label: 'غیبت موجه', value: `${persianDigits(attendance.excusedAbsence)} روز`, tone: '#F59E0B' },
    { label: 'غیبت غیرموجه', value: `${persianDigits(attendance.unexcusedAbsence)} روز`, tone: '#DC2626' },
  ];

  return (
    <div className="rc-attendance-summary">
      <div className="rc-attendance-gauge">
        <div className="rc-attendance-gauge-bar">
          <div
            className="rc-attendance-gauge-fill"
            style={{ width: `${Math.min(100, Math.max(0, attendance.presentPercent))}%` }}
          />
        </div>
        <span className="rc-attendance-gauge-value">{persianDigits(attendance.presentPercent)}٪</span>
      </div>
      <dl className="rc-attendance-list">
        {rows.map((row) => (
          <div key={row.label} className="rc-attendance-row">
            <dt>
              <span className="rc-attendance-dot" style={{ background: row.tone }} />
              {row.label}
            </dt>
            <dd>{row.value}</dd>
          </div>
        ))}
      </dl>
    </div>
  );
}