'use client';

import { AlertCircle } from 'lucide-react';
import type { DocumentLockStatus } from '@/hooks/use-document-lock';

type DocumentLockBannerProps = {
  lockStatus: DocumentLockStatus;
  className?: string;
};

export function DocumentLockBanner({ lockStatus, className = '' }: DocumentLockBannerProps) {
  if (!lockStatus.isLocked || lockStatus.showLockMessage === false) {
    return null;
  }

  return (
    <div className={`rounded-md border border-amber-200 bg-amber-50 p-4 flex gap-3 ${className}`.trim()}>
      <AlertCircle className="h-5 w-5 text-amber-600 mt-0.5 flex-shrink-0" />
      <div>
        <p className="font-medium text-amber-900">{lockStatus.lockError || 'هذا السجل قيد التعديل حالياً'}</p>
        {lockStatus.lockedBy && (
          <p className="text-sm text-amber-700 mt-1">
            {`يتم تعديل السجل من خلال المستخدم: ${lockStatus.lockedBy.userName} - ولن يستطيع أي مستخدم آخر الحفظ عليه حتى الانتهاء من التعديل`}
          </p>
        )}
      </div>
    </div>
  );
}