import { clx } from "@medusajs/ui"
import { ConditionalTooltip } from "../../../../common/conditional-tooltip"
import { PlaceholderCell } from "../placeholder-cell"

type CellProps = {
  text?: string | number
  align?: "left" | "center" | "right"
  maxWidth?: number
}

type HeaderProps = {
  text: string
  align?: "left" | "center" | "right"
}

export const TextCell = ({ text, align = "left", maxWidth = 220 }: CellProps) => {
  if (!text) {
    return <PlaceholderCell />
  }

  const stringLength = text.toString().length

  return (
    <ConditionalTooltip content={text} showTooltip={stringLength > 20}>
    <div className={clx("flex h-full w-full items-center gap-x-3 overflow-hidden", {
      "justify-start text-start": align === "left",
      "justify-center text-center": align === "center",
      "justify-end text-end": align === "right",
    })}
    style={{
      maxWidth: maxWidth,
    }}>
      <span className="truncate">{text}</span>
    </div>
    </ConditionalTooltip>
  )
}

export const TextHeader = ({ text, align = "left" }: HeaderProps) => {
  return (
    <div className={clx("flex h-full w-full items-center", {
      "justify-start text-start": align === "left",
      "justify-center text-center": align === "center",
      "justify-end text-end": align === "right",
    })}>
      <span className="truncate">{text}</span>
    </div>
  )
}