import type { ReactNode } from "react";

type EmptyStateCardProps = {
  title: string;
  description: string;
  footer?: ReactNode;
  icon?: ReactNode;
};

export function EmptyStateCard({ title, description, footer, icon }: EmptyStateCardProps) {
  return (
    <section className="card-std p-8 text-center">
      {icon ? (
        <div className="mx-auto mb-4 flex size-12 items-center justify-center rounded-2xl bg-primary/10 text-primary">
          {icon}
        </div>
      ) : null}
      <h3 className="text-base font-semibold text-[var(--color-text-primary)]">{title}</h3>
      <p className="card-desc mx-auto max-w-xl">{description}</p>
      {footer ? <div className="mt-5 flex justify-center">{footer}</div> : null}
    </section>
  );
}