import type { LucideIcon } from 'lucide-react';

import { classNames } from '../../lib/utils';

/** Props for {@link EmptyState}. */
interface EmptyStateProps {
  icon: LucideIcon;
  title: string;
  description: string;
  /** The icon's tint: quiet grey, or green for "nothing wrong here". */
  tone?: 'muted' | 'success';
}

const ICON_WELL: Record<NonNullable<EmptyStateProps['tone']>, string> = {
  muted: 'bg-muted/40',
  success: 'bg-emerald-500/10',
};

const ICON_CLASS: Record<NonNullable<EmptyStateProps['tone']>, string> = {
  muted: 'text-text-muted',
  success: 'text-status-success-fg dark:text-emerald-300',
};

/** A dashed well saying a list has nothing in it yet, and why that is fine. */
function EmptyState({
  icon: Icon,
  title,
  description,
  tone = 'muted',
}: EmptyStateProps): JSX.Element {
  return (
    <div className="flex flex-col items-center justify-center gap-2 rounded-xl border border-dashed border-border/60 px-6 py-10 text-center">
      <span
        className={classNames(
          'flex h-10 w-10 items-center justify-center rounded-xl',
          ICON_WELL[tone]
        )}
      >
        <Icon className={classNames('h-5 w-5', ICON_CLASS[tone])} />
      </span>
      <p className="text-sm font-medium text-foreground">{title}</p>
      <p className="max-w-xs text-xs text-text-muted">{description}</p>
    </div>
  );
}

export default EmptyState;