import { AvailableRange } from '@/enums';
import { type CodeConfigData } from '@/pages/CodeConfig/List';
import { Flex, Typography } from 'antd';
import classNames from 'classnames';
import styles from './index.less';

type CodeConfigItemProps = {
  item: CodeConfigData;
  onClick?: (item: CodeConfigData) => void;
};

function CodeConfigItem({ item, onClick }: CodeConfigItemProps) {
  return (
    <div className={styles['code-config-item']} onClick={() => onClick?.(item)}>
      <Flex justify="space-between" align="center" style={{ marginBottom: '15px' }}>
        <Typography.Paragraph
          className={styles['code-config-item__name']}
          ellipsis={{ tooltip: item.code_repo_name }}
        >
          {item.code_repo_name}
        </Typography.Paragraph>
        <div
          className={classNames(
            styles['code-config-item__tag'],
            item.code_repo_vis === AvailableRange.Public
              ? styles['code-config-item__tag--public']
              : styles['code-config-item__tag--private'],
          )}
        >
          {item.code_repo_vis === AvailableRange.Public ? '公开' : '私有'}
        </div>
      </Flex>
      <Typography.Paragraph
        className={styles['code-config-item__url']}
        ellipsis={{ rows: 2, tooltip: item.git_url }}
      >
        {item.git_url}
      </Typography.Paragraph>
      <div className={styles['code-config-item__branch']}>{item.git_branch}</div>
    </div>
  );
}

export default CodeConfigItem;
