import type { ComponentChildren, JSX } from 'preact';
import { cn } from './cn';

export type EmptyStateProps = JSX.HTMLAttributes<HTMLDivElement> & {
  icon?: ComponentChildren;
  title?: ComponentChildren;
  description?: ComponentChildren;
  action?: ComponentChildren;
  dashed?: boolean;
};

export function EmptyState({
  className,
  children,
  icon,
  title,
  description,
  action,
  dashed = true,
  ...props
}: EmptyStateProps) {
  return (
    <div
      className={cn(
        'ask-empty-state ask-rounded-2xl ask-border ask-bg-surfaceAlt ask-p-4',
        dashed ? 'ask-border-dashed' : 'ask-border-solid',
        'ask-border-borderSubtle',
        className,
      )}
      {...props}
    >
      <div className="ask-flex ask-items-start ask-gap-3">
        {icon ? (
          <span className="ask-flex ask-h-8 ask-w-8 ask-shrink-0 ask-items-center ask-justify-center ask-rounded-full ask-bg-primarySoft ask-text-primary">
            {icon}
          </span>
        ) : null}
        <div className="ask-min-w-0 ask-flex-1">
          {title ? <div className="ask-text-[12px] ask-font-semibold ask-text-textMain">{title}</div> : null}
          {description ? <p className="ask-mt-1 ask-text-[11px] ask-leading-5 ask-text-textMuted">{description}</p> : null}
          {children}
          {action ? <div className="ask-mt-3 ask-flex ask-flex-wrap ask-gap-2">{action}</div> : null}
        </div>
      </div>
    </div>
  );
}
