import * as React from 'react';
import { RenderProps } from 'src/types/op-table';
import { TagProps } from 'src/types/op-tag';
import Tag from 'src/view/op-tag';

export default function Name(props: RenderProps) {
  const { value = '', record } = props;
  const { tagList = [], snList = [] } = record;

  return (
    <>
      <div className='name-wrap'>{value}</div>
      {tagList?.length ? (
        <div className='tag-list'>
          {tagList.map((tag: TagProps) => (
            <Tag {...tag} />
          ))}
        </div>
      ) : null}
      {snList && snList.length ? (
        <div className='sn-list'>sn: {snList?.toString()}</div>
      ) : null}
    </>
  );
}