'use client'

import { Button } from '@/components/ui/button'
import { DemoTooltip } from '@/components/shared/demo-tooltip'
import { debugProps } from '@/lib/debug'

interface EmptyPanelProps {
  title?: string
  message: string
  action?: {
    label: string
    onClick: () => void
    disabled?: boolean
  }
}

export function EmptyPanel({ title, message, action }: EmptyPanelProps) {
  return (
    <div className="p-8 text-center text-muted-foreground space-y-3" {...debugProps('empty-panel', 'EmptyPanel', 'components/backlog/empty-panel.tsx')}>
      {title && <p className="text-sm font-medium text-foreground" {...debugProps('empty-panel__title')}>{title}</p>}
      <p className="text-sm">{message}</p>
      {action && (
        <DemoTooltip show={action.disabled ?? false}>
          <Button
            size="sm"
            variant="outline"
            disabled={action.disabled}
            onClick={action.disabled ? undefined : action.onClick}
            {...debugProps('empty-panel__cta')}
          >
            {action.label}
          </Button>
        </DemoTooltip>
      )}
    </div>
  )
}