import "./index.css";

export default ({ text = "", className = "", backgroundImage }) => {
  return (
    <div 
      className={`lock-wrapper ${className}`}
      style={backgroundImage ? {
        backgroundImage: `url(${backgroundImage})`,
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        position: 'relative'
      } : {}}
    >
      {backgroundImage && (
        <div style={{
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          backdropFilter: 'blur(20px)',
          WebkitBackdropFilter: 'blur(20px)',
          backgroundColor: 'rgba(0, 0, 0, 0.3)'
        }} />
      )}
      <div className="lock" style={backgroundImage ? { position: 'relative', zIndex: 1 } : {}}>
        {text ? <span>{text}</span> : null}
      </div>
    </div>
  );
};