import type { ReactNode } from 'react';

interface EmptyStateProps {
  title: string;
  description?: string;
  action?: ReactNode;
}

export function EmptyState({ title, description, action }: EmptyStateProps): JSX.Element {
  return (
    <div
      data-testid="empty-state"
      className="card-product flex flex-col items-start gap-md border border-hairline"
    >
      <h2 className="text-[24px] font-medium text-ink">{title}</h2>
      {description ? <p className="text-[16px] text-charcoal">{description}</p> : null}
      {action ? <div className="pt-xs">{action}</div> : null}
    </div>
  );
}