"use client"

import type { ComponentType } from "react"

import { cn } from "@/lib/utils"

type IconProps = {
  className?: string
}

type EmptyIndicatorProps = {
  icon: ComponentType<IconProps>
  label: string
  className?: string
}

export function EmptyIndicator({ icon: Icon, label, className }: EmptyIndicatorProps) {
  return (
    <span
      className={cn(
        "relative inline-flex h-8 w-8 items-center justify-center rounded-full border border-dashed border-neutral-300 bg-neutral-50 text-neutral-400",
        className,
      )}
    >
      <Icon className="size-4" aria-hidden="true" />
      <span className="sr-only">{label}</span>
    </span>
  )
}

