import React from 'react';
import { inject } from '../lib/inject';

const css = `
.nbl-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px 24px;gap:16px;}
.nbl-empty__icon{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:var(--radius-lg);background:var(--surface-sunken);color:var(--text-muted);}
.nbl-empty__body{display:flex;flex-direction:column;gap:6px;max-width:360px;}
.nbl-empty__title{font-size:var(--text-md);font-weight:var(--weight-semibold);color:var(--text-strong);margin:0;line-height:var(--leading-snug);}
.nbl-empty__desc{font-size:var(--text-sm);color:var(--text-muted);margin:0;line-height:var(--leading-normal);}
.nbl-empty__action{margin-top:4px;}
`;

inject('nbl-empty-css', css);

export interface EmptyStateProps {
  icon?: React.ReactNode;
  title: string;
  description?: string;
  action?: React.ReactNode;
  className?: string;
  style?: React.CSSProperties;
}

export function EmptyState({ icon, title, description, action, className = '', style }: EmptyStateProps) {
  inject('nbl-empty-css', css);
  const cls = ['nbl-empty', className].filter(Boolean).join(' ');

  return (
    <div className={cls} style={style}>
      {icon && <div className="nbl-empty__icon">{icon}</div>}
      <div className="nbl-empty__body">
        <h3 className="nbl-empty__title">{title}</h3>
        {description && <p className="nbl-empty__desc">{description}</p>}
      </div>
      {action && <div className="nbl-empty__action">{action}</div>}
    </div>
  );
}