import React from 'react';
import { Lock, Unlock } from 'lucide-react';

interface EditLockBadgeProps {
  isLocked: boolean;
  onToggle: () => void;
}

const EditLockBadge: React.FC<EditLockBadgeProps> = ({ isLocked, onToggle }) => {
  return (
    <button
      onClick={onToggle}
      className={`flex items-center gap-2 px-3 py-1.5 rounded-lg border transition-all hover:scale-105 ${
        isLocked
          ? 'text-[#ff006e] bg-[#ff006e]/10 border-[#ff006e]/30 font-semibold'
          : 'text-[#39ff14] bg-[#39ff14]/10 border-[#39ff14]/30'
      }`}
      title={isLocked ? 'Click to unlock and edit' : 'Click to lock and blur sensitive data'}
    >
      {isLocked ? <Lock className="w-3.5 h-3.5" /> : <Unlock className="w-3.5 h-3.5" />}
      <span className="text-xs font-medium">
        {isLocked ? 'Locked' : 'Edit'}
      </span>
    </button>
  );
};

export default EditLockBadge;
