function NotFoundIcon() {
  return (
    <svg className="empty-state-svg" viewBox="0 0 80 80" fill="none" aria-hidden="true">
      <rect className="empty-state-doc" x="8" y="8" width="46" height="60" rx="6" strokeWidth="2.25" />
      <rect className="empty-state-clip" x="21" y="4" width="20" height="10" rx="3" strokeWidth="2.25" />
      <path className="empty-state-line" d="M20 28h22M20 37h18M20 46h14" strokeWidth="2.25" strokeLinecap="round" />
      <circle className="empty-state-glass" cx="56" cy="54" r="17" strokeWidth="2.5" />
      <path className="empty-state-handle" d="M68.5 66.5 77 75" strokeWidth="3.25" strokeLinecap="round" />
    </svg>
  );
}

export default function EmptyState({ title = 'Not found', description = 'No data to show', size = 'md' }) {
  return (
    <div className={`empty-state${size === 'sm' ? ' is-sm' : ''}`}>
      <NotFoundIcon />
      <p className="empty-state-title">{title}</p>
      {description ? <p className="empty-state-copy">{description}</p> : null}
    </div>
  );
}

export function EmptyTableRow({ colSpan = 20, title = 'Not found', description = 'No data to show' }) {
  return (
    <tr className="empty-state-row">
      <td colSpan={colSpan}>
        <EmptyState title={title} description={description} size="sm" />
      </td>
    </tr>
  );
}