import type { Component } from "solid-js";
import type { LucideProps } from "lucide-solid";

export function EmptyState(props: { icon: Component<LucideProps>; title: string; detail: string }) {
  const Icon = props.icon;
  return (
    <div class="flex min-h-56 flex-col items-center justify-center gap-2 px-6 text-center text-muted">
      <Icon size={22} />
      <strong class="text-sm text-ink">{props.title}</strong>
      <span class="text-xs">{props.detail}</span>
    </div>
  );
}
