import React from 'react';
import { LockOutlined, UnlockOutlined } from '@easyv/react-icons';
import classnames from 'classnames';

export interface LockIconProp {
  value?: boolean;
  className?: string;
  bordered?: boolean;
  onClick?: (locked: boolean) => void;
  onChange?: (locked: boolean) => void;
}

const LockIcon: React.FC<LockIconProp> = function ({
  value,
  className,
  bordered = false,
  onClick,
  onChange,
}) {
  return (
    <span
      className={classnames(
        'cursor-pointer inline-flex items-center justify-center',
        className,
        {
          'border-1 rounded': bordered,
        },
        value ? 'border-primary' : 'border-borderColorBase',
      )}
      onClick={() => {
        onClick?.(!value);
        onChange?.(!value);
      }}>
      {value ? (
        <LockOutlined className="anticon !text-primary" />
      ) : (
        <UnlockOutlined className="anticon !text-textColorBase" />
      )}
    </span>
  );
};

export default LockIcon;