import type * as React from 'react'
import { cn } from '@admin/utils/shared/cn'

type PlaceholderProps = {
  label: string
  description: string
  action: React.ReactNode
  className?: string
} & React.ComponentProps<'div'>

export function Placeholder({ label, description, action, className, ...props }: PlaceholderProps) {
  return (
    <div
      className={cn(
        'flex flex-col items-center gap-2 rounded-sm border border-dashed border-border bg-background p-8',
        className
      )}
      {...props}
    >
      <h4 className="text-sm font-medium">{label}</h4>
      <p className="text-sm text-muted-foreground">{description}</p>
      <div className="flex pt-4">{action}</div>
    </div>
  )
}