import React from 'react';
import { SBox } from '../../../common/s-components/layout/s-box';
import { TStyled } from '../../../common/types';
import { SPersonalizedLabel } from '../../s-components/s-personalized-label';

type TProps = {
  text: string;
} & TStyled;

export const Personalized: React.FC<TProps> = props => {
  const { text, ...css } = props;
  return (
    <SBox
      px={8}
      borderRadius={2}
      backgroundColor="purpleHeart2"
      height={24}
      justifyContent="center"
      {...css}
    >
      <SPersonalizedLabel>{text}</SPersonalizedLabel>
    </SBox>
  );
};