import { useState } from "react";
import { person, type Student } from "../types";

export default function StudentAvatar({
    student,
    large = false,
}: {
    student: Student;
    large?: boolean;
}) {
    const [failedUrl, setFailedUrl] = useState<string | null>(null);
    return (
        <span className={`student-avatar ${large ? "large" : ""}`}>
            {student.photo_url && failedUrl !== student.photo_url ? (
                <img
                    src={student.photo_url}
                    alt={`Photo of ${person(student)}`}
                    onError={() => setFailedUrl(student.photo_url ?? null)}
                />
            ) : (
                <span aria-label={`Initials for ${person(student)}`}>
                    {student.first_name[0]}
                    {student.last_name[0]}
                </span>
            )}
        </span>
    );
}