import type { ConflictDetail } from "@/types";
import { UsersIcon, ClockIcon } from "@/components/ui";
import { formatConflictTime } from "@/utils/format";

interface StudentConflictsCardProps {
  conflicts: ConflictDetail[];
}

export function StudentConflictsCard({ conflicts }: StudentConflictsCardProps) {
  const studentCount = conflicts.length;

  return (
    <div className="bg-white border border-slate-200 rounded-xl p-4 shadow-sm">
      <div className="flex gap-3">
        <div className="flex-shrink-0 w-10 h-10 rounded-full bg-error-100 flex items-center justify-center text-error-600">
          <UsersIcon size={20} />
        </div>
        <div className="flex-1 min-w-0">
          <h4 className="font-semibold text-slate-800 mb-1">
            Student Conflicts
          </h4>
          <p className="text-sm text-slate-600 mb-3">
            {studentCount} student{studentCount !== 1 ? "s are" : " is"}{" "}
            enrolled in conflicting classes:
          </p>
          <div className="space-y-2 ml-1 border-l-2 border-slate-200 pl-3">
            {conflicts.map((conflict, index) => (
              <div key={index} className="text-sm">
                <p className="font-medium text-slate-700">
                  {conflict.resource?.name}
                </p>
                <p className="text-slate-500 text-xs">
                  Enrolled in "{conflict.existing_class?.course_name}"
                </p>
                {conflict.existing_class && (
                  <div className="flex items-center gap-1 mt-0.5 text-xs text-slate-400">
                    <ClockIcon size={12} />
                    <span>
                      {formatConflictTime(conflict.existing_class.start_time)}-
                      {formatConflictTime(conflict.existing_class.end_time)}
                    </span>
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}