"use client"

import { typeMarketOptions } from "@/config/constant"
import { Tag } from "antd"
import { isEmpty } from "lodash"

export const renderTags = () => {
  const marketOptions = typeMarketOptions()

  const renderLabelBottom = (tradeTypes: string | string[], className?: string) => {
    const codes = Array.isArray(tradeTypes) ? tradeTypes : [tradeTypes]
    const filteredLabels = marketOptions.filter((item) => codes.includes(item.value))

    return (
      <div className={`flex items-center justify-start flex-wrap gap-1 ${className || ""}`}>
        {!isEmpty(filteredLabels?.filter(Boolean))
          ? (filteredLabels || [])?.map((label, index: number) => (
              <div
                key={index}
                className={`text-sm font-bold p-1 md:px-[7px] md:py-[3px] rounded-[6px] ${label?.className || ""}`}>
                {label?.label || ""}
              </div>
            ))
          : null}
      </div>
    )
  }

  const renderNameTags = (tags: string | string[], className?: string) => {
    const codes = Array.isArray(tags) ? tags : [tags]

    return (
      <div className={`flex items-center justify-start flex-wrap gap-2 ${className || ""}`}>
        {!isEmpty(codes?.filter(Boolean))
          ? codes?.map((label, index: number) => (
              <Tag
                color="default"
                key={index}
                className={`text-sm font-normal !text-[var(--secondary-100)] !py-1 !px-2 rounded-[6px] !mr-0`}>
                {label ? `#${label}` : ""}
              </Tag>
            ))
          : null}
      </div>
    )
  }

  return {
    renderLabelBottom,
    renderNameTags,
  }
}