import { FunctionalComponent } from 'preact';

type Props = {
  isEncryptionEnabled: boolean;
  notesAndTagsCount: number;
  encryptionStatusString: string | undefined;
}

const Encryption: FunctionalComponent<Props> = ({
                                                  isEncryptionEnabled,
                                                  notesAndTagsCount,
                                                  encryptionStatusString
                                                }) => {
  const getEncryptionStatusForNotes = () => {
    const length = notesAndTagsCount;
    return `${length}/${length} notes and tags encrypted`;
  };

  return (
    <div className="sk-panel-section">
      <div className="sk-panel-section-title">
        Encryption
      </div>
      {isEncryptionEnabled && (
        <div className="sk-panel-section-subtitle info">
          {getEncryptionStatusForNotes()}
        </div>
      )}
      <p className="sk-p">
        {encryptionStatusString}
      </p>
    </div>
  );
};

export default Encryption;