type ColorProps = {
  hex: string;
  noText?: boolean;
};

export const Color = (props: ColorProps) => {
  const { hex, noText = false } = props;
  console.log(props);
  return (
    <span className="color-swatch-container">
      <span className={['nx-rounded-sm', 'color-swatch'].join(' ')} />
      <code>{noText ? '' : hex}</code>
      <style jsx>{`
        span.color-swatch-container {
          display: inline-flex;
          align-items: ${noText ? 'flex-end' : 'center'};
          justify-content: space-between;
        }
        span.color-swatch {
          display: inline-flex;
          background-color: ${hex};
          height: 1.5rem;
          width: 1.5rem;
          padding: 0.5rem 0.5rem;
          margin-right: ${noText ? 'unset' : '0.5rem'};
        }
      `}</style>
    </span>
  );
};