import Box from '~/src/components/Box';
import Text from '~/src/components/Text';
import { createChannelLink } from './utils';

export const ChannelCell = ({
  code,
  name,
  baseUrl,
}: {
  code: string;
  name: string;
  baseUrl: string;
}) => {
  const link = createChannelLink(baseUrl, code);

  return (
    <Box flexRow alignCenter gap="1rem" minWidth={0}>
      <Box
        noFlexShrink
        centerContent
        width="2.5rem"
        height="2.5rem"
        style={{
          borderRadius: '3px',
          backgroundColor: 'rgba(255, 255, 255, 0.1)',
        }}
      >
        <Text size="1rem" color="#777" weight="medium">
          {code}
        </Text>
      </Box>
      <Box flexColumn flexGrow gap="0.2rem">
        <Text title={name} size="1.3rem" withEllipsis weight="medium">
          {name}
        </Text>
        <Text title={link} size="1.3rem" color="#B2B2B2" withEllipsis noWrap>
          {link}
        </Text>
      </Box>
    </Box>
  );
};