import React from 'react';
import styled from 'styled-components';
import { uiColors } from '../../constants/uiColors';

interface IProps extends React.HTMLAttributes<HTMLParagraphElement> {
  children: string;
}

export const HighlightedText = ({ children, ...rest }: IProps) => {
  return <Text {...rest}>{children}</Text>;
};

const Text = styled.p`
  color: ${uiColors.yellow} !important;

  font-weight: bold;
  font-size: 1.2rem;

  // show the cursor as a pointer when hovering over the text

  &:hover {
    text-decoration: underline;
    cursor: pointer;
  }
`;
