import { useRequest } from "ahooks";
import { Divider, Flex, Skeleton, Tag, Typography } from "antd";
import { EType, type XCXTag } from "../types";
import { useLoaderData } from "react-router";

interface Props {
  uid?: string;
}

const color: {
  [EType.GREEN]: string;
  [EType.RED]: string;
  [EType.YELLOW]: string;
} = {
  [EType.GREEN]: 'success',
  [EType.RED]: 'error',
  [EType.YELLOW]: 'warning',
};

export default function UserTags(props: Props) {
  const { tags } = useLoaderData<{ tags: XCXTag[] }>();
  if (!props.uid || !tags.length) return null;
  return (
    <>
      <Divider>评价标签</Divider>
      <Flex wrap gap={12} justify="center">
        { (tags?.length ? tags?.map(e => (
              <Tag key={e.eid} color={color[e.etype]}>{e.ename}({e.count})</Tag>
          )) : (<Typography.Text type="secondary">暂时没人评价</Typography.Text>)
        )}
      </Flex>
    </>
  );
}