import * as React from 'react';
import styled from 'styled-components';

import type { JSX } from 'react';

export type SearchShortcutProps = {
  combination: string;
  text: string;
  className?: string;
};

export function SearchShortcut({ combination, text, className }: SearchShortcutProps): JSX.Element {
  return (
    <ShortcutWrapper data-component-name="Search/SearchShortcut" className={className}>
      <ShortcutKey>{combination}</ShortcutKey>
      {text}
    </ShortcutWrapper>
  );
}

const ShortcutWrapper = styled.div`
  display: flex;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-sm);
  color: var(--search-item-text-color);
  gap: var(--spacing-xs);
`;

const ShortcutKey = styled.span`
  background: var(--bg-color-active);
  border-radius: var(--border-radius);
  padding: 0px var(--spacing-xxs);
`;