import React from 'react';
import type { MessageBlock } from '@/store/commStore';
import { ShieldCheck, Check, X } from 'lucide-react';

interface ApprovalRequestBlockProps {
  block: MessageBlock;
}

const ApprovalRequestBlock: React.FC<ApprovalRequestBlockProps> = ({ block }) => {
  const { title, description, approval_id, status } = block.block_data;
  return (
    <div className="border-2 border-warning-200 rounded-lg p-3 bg-warning-50">
      <div className="flex items-center gap-2 mb-2">
        <ShieldCheck className="w-4 h-4 text-warning-600" />
        <span className="text-sm font-medium text-secondary-900">{title || 'Approval Required'}</span>
        {status && <span className="text-xs px-2 py-0.5 rounded-full bg-warning-100 text-warning-700 capitalize">{status}</span>}
      </div>
      {description && <p className="text-sm text-secondary-700 mb-2">{description}</p>}
      {status === 'pending' && (
        <div className="flex gap-2">
          <button className="inline-flex items-center gap-1 px-3 py-1.5 rounded-lg bg-success-600 text-white text-sm hover:bg-success-700 min-h-touch">
            <Check className="w-3.5 h-3.5" /> Approve
          </button>
          <button className="inline-flex items-center gap-1 px-3 py-1.5 rounded-lg bg-danger-600 text-white text-sm hover:bg-danger-700 min-h-touch">
            <X className="w-3.5 h-3.5" /> Reject
          </button>
        </div>
      )}
      {approval_id && <p className="text-xs text-secondary-400 mt-1">ID: {approval_id.slice(0, 8)}</p>}
    </div>
  );
};
export default ApprovalRequestBlock;