import * as stylex from '@stylexjs/stylex';

import { Text } from '~/src/ui/primitives/text';
import { colors, radius } from '~/src/ui/tokens/tokens.stylex';

const styles = stylex.create({
  base: {
    display: 'inline-flex',
    width: '2.5rem',
    height: '2.5rem',
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: radius[1],
    backgroundColor: colors.white10,
    overflow: 'hidden',
  },
});

export const ChannelBadge = ({ channelCode }: { channelCode: string }) => {
  return (
    <div {...stylex.props(styles.base)}>
      <Text variant="subtext" color="secondary" truncate>
        {channelCode}
      </Text>
    </div>
  );
};