import { splitProps, type JSX } from 'solid-js'
import { cn } from '@/utils/cn'

interface EmptyStateProps extends JSX.HTMLAttributes<HTMLDivElement> {
  title: string
  description: string
}

export const EmptyState = (props: EmptyStateProps) => {
  const [local, rest] = splitProps(props, ['class', 'title', 'description'])

  return (
    <div class={cn('rounded-2xl bg-surface-low p-8 text-center', local.class)} {...rest}>
      <h4 class="font-display text-lg font-semibold text-fg">{local.title}</h4>
      <p class="mt-3 text-sm text-muted-fg leading-relaxed">{local.description}</p>
    </div>
  )
}
