EvoBGP/apps/web/src/components/data-grid-cell.tsx

import type { LucideIcon } from 'lucide-react'
import type { ReactNode } from 'react'

import { IconTile } from '@/components/reui/icon-tile'
import { cn } from '@evobgp/ui/lib/utils'

/**
 * Name cell DNA — IconTile elevated size-10.5 + truncate.
 * Preview: https://reui.io/preview/base/stats-12
 * Docs: https://reui.io/docs/components/base/icon-tile
 */
export function DataGridNameCell({
  icon: Icon,
  title,
  subtitle,
  iconClassName = 'text-muted-foreground',
  className,
}: {
  icon: LucideIcon
  title: ReactNode
  subtitle?: ReactNode
  iconClassName?: string
  className?: string
}) {
  return (
    <div className={cn('flex min-w-0 items-center gap-2.5', className)}>
      <IconTile variant="elevated" className="size-10.5">
        <Icon className={iconClassName} aria-hidden />
      </IconTile>
      <div className="flex min-w-0 flex-col gap-0.5">
        <span className="truncate font-medium">{title}</span>
        {subtitle ? (
          <span className="truncate text-xs text-muted-foreground">{subtitle}</span>
        ) : null}
      </div>
    </div>
  )
}

export function DataGridMutedCell({
  children,
  className,
}: {
  children: ReactNode
  className?: string
}) {
  return (
    <span className={cn('whitespace-nowrap text-xs text-muted-foreground', className)}>
      {children}
    </span>
  )
}

/** Mono / secondary cell without semantic primary color. */
export function DataGridMonoCell({
  children,
  className,
}: {
  children: ReactNode
  className?: string
}) {
  return (
    <span className={cn('truncate font-mono text-sm', className)}>{children}</span>
  )
}