import React from 'react';

interface IPasswordRuleProps {
  massage: string;
  checked: boolean;
  hasError: boolean;
}

const PasswordRule = ({
  massage,
  checked,
  hasError,
}: IPasswordRuleProps): JSX.Element => {
  return (
    <div className="flex items-center space-x-2">
      {!hasError && (
        <img
          alt="ch"
          src={`/icons/${checked ? 'checked' : 'check'}.svg`}
          className="h-[8px]"
        />
      )}
      <small
        className={
          checked
            ? 'text-emerald-500 text-[12px]'
            : hasError
              ? 'text-rose-500 text-[12px]'
              : 'text-[12px]'
        }
      >
        {massage}
      </small>
    </div>
  );
};

export default PasswordRule;