import React from "react";

export const Keys = ({ firstSymbol, firstText, secondText }) => {
  return (
    <div className="keys">
      <div className="button-outer">
        <div className="button-inner">
          {firstSymbol && (
            <span className="key-symbol">{firstSymbol}</span>
          )}
          <span className="key-text">{firstText}</span>
        </div>
      </div>

      <div className="button-outer single-key">
        <div className="button-inner">
          <span className="key-text">{secondText}</span>
        </div>
      </div>
    </div>
  );
};
export const KeyCombo = ({
  firstSymbol,
  firstText,
  secondText,
  description,
}) => {
  return (
    <div className="keycombo-container-wrapper">
      <div className="keycombo-container">
        <Keys
          firstSymbol={firstSymbol}
          firstText={firstText}
          secondText={secondText}
        />
      </div>

      <div className="keycombo-description">{description}</div>
    </div>
  );
};
