import React from 'react';

/**
 * EmptyState — standard "nothing here yet" panel.
 *
 * <EmptyState
 *   icon={MagnifyingGlassIcon}
 *   title="No issues found"
 *   description="Run an audit to see results here."
 *   action={<Button onClick={run}>Run Audit</Button>}
 * />
 */
const EmptyState = ({ icon: Icon = null, title, description, action = null, className = '' }) => (
  <div
    className={`pr:flex pr:flex-col pr:items-center pr:justify-center pr:text-center pr:rounded-2xl pr:border pr:border-dashed pr:border-slate-300 pr:bg-slate-50/60 pr:px-6 pr:py-12 ${className}`}
  >
    {Icon && (
      <div className="pr:mb-4 pr:flex pr:h-12 pr:w-12 pr:items-center pr:justify-center pr:rounded-xl pr:bg-white pr:shadow-xs pr:ring-1 pr:ring-slate-200">
        <Icon className="pr:h-6 pr:w-6 pr:text-slate-400" aria-hidden="true" />
      </div>
    )}
    {title && <h3 className="pr:text-base pr:font-semibold pr:text-slate-900">{title}</h3>}
    {description && (
      <p className="pr:mt-1 pr:max-w-md pr:text-sm pr:text-slate-500">{description}</p>
    )}
    {action && <div className="pr:mt-5">{action}</div>}
  </div>
);

export default EmptyState;