import { CheckCircle } from 'lucide-react';
import { StatePanel } from '@/components/ui/state-panel';

type CampusAttendanceLoadingStateProps = {
  message?: string;
};

export function CampusAttendanceLoadingState({
  message = 'Loading attendance data...',
}: CampusAttendanceLoadingStateProps) {
  return (
    <div className="flex items-center justify-center py-20">
      <StatePanel tone="orange" size="inline" alignment="center" loading className="border-0 bg-transparent p-0">
        {message}
      </StatePanel>
    </div>
  );
}

type CampusAttendanceStatusProps = {
  successMessage: string;
  errorMessage: string | null;
};

export function CampusAttendanceStatus({
  successMessage,
  errorMessage,
}: CampusAttendanceStatusProps) {
  return (
    <>
      {successMessage && (
        <div className="bg-emerald-500/10 border border-emerald-500/20 rounded-xl p-4 flex items-center gap-3">
          <CheckCircle size={18} className="text-emerald-400" />
          <p className="text-sm text-emerald-300 font-medium">{successMessage}</p>
        </div>
      )}
      {errorMessage && (
        <div className="bg-red-500/10 border border-red-500/20 rounded-xl p-4">
          <p className="text-sm text-red-300 font-medium">{errorMessage}</p>
        </div>
      )}
    </>
  );
}
