import { css } from 'glamor';
import { useApphouse } from '../context/useApphouse';
import { setAlpha } from '../utils/color/setAlpha';

interface DecorationTextBackgroundProps {
  text: string;
  /**
   * Number between 0 and 1 to set the opacity of the text
   * @default 0.1
   */
  strength?: number;
}
export const DecorationTextBackground: React.FC<
  DecorationTextBackgroundProps
> = ({ text, strength = 0.2 }) => {
  const { theme } = useApphouse();
  const { colors } = theme;
  return (
    <div
      {...css({
        content: "'1999'",
        color: setAlpha(colors.onPrimary, strength),
        fontSize: '300px',
        position: 'absolute',
        top: '-185px',
        width: '100%',
        textAlign: 'center',
        padding: '0px',
        margin: '0px',
        opacity: '0.15',
        fontWeight: '500',
        display: 'block',
        height: '350px',
        overflow: 'hidden',
        userSelect: 'none'
      })}
    >
      {text}
    </div>
  );
};