import { Image, Space, Tag } from 'antd';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
dayjs.extend(relativeTime);

export const renderTextHelper = {
  TagList(items: { label: string; value: string; color: string }[]) {
    return (
      <Space>
        {items?.map((item) => (
          <Tag color={item.color} key={item.value}>
            {item.label}
          </Tag>
        ))}
      </Space>
    );
  },
  Tag({
    Enums,
    value,
    isColor = true,
  }: {
    Enums?: any;
    value?: any;
    isColor?: any;
  }) {
    let item: any = Object.values(Enums).find((data: any) => {
      return data.value === '' + value;
    });
    return isColor ? (
      <Tag color={item?.color}>{item?.text}</Tag>
    ) : (
      <>{item?.text}</>
    );
  },
  Images(images: string[]) {
    return (
      <Image.PreviewGroup>
        {images?.map((img: any) => (
          <Image
            key={img.uid}
            width={100}
            // height={100}
            src={img.url}
          />
        ))}
      </Image.PreviewGroup>
    );
  },
  RelativeTo(value: string) {
    return dayjs().to(dayjs(value));
  },
};